CSS Display

Common Display Values

🔸 Block Elements

/* Block display */
.block-element {
    display: block;
    background: #e3f2fd;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #2196f3;
}

<div class="block-element">Block Element 1</div>
<div class="block-element">Block Element 2</div>
<span class="block-element">Span as Block</span>

🔸 Inline Elements

/* Inline display */
.inline-element {
    display: inline;
    background: #fff3e0;
    padding: 5px 10px;
    border: 1px solid #ff9800;
}

<div class="inline-element">Inline 1</div>
<div class="inline-element">Inline 2</div>
<div class="inline-element">Inline 3</div>

🔹 Inline-Block Display

The display: inline-block property combines inline flow with block-level styling capabilities, allowing elements to sit side-by-side while accepting dimensions. Unlike inline, inline-block elements can have width, height, padding, and margins; unlike block, they don’t force line breaks. This is ideal for horizontal navigation items, button groups, and grid-like layouts without Flexbox or Grid. However, it may cause whitespace gaps due to HTML formatting. Using font-size: 0 on the parent can mitigate this. For SEO, inline-block supports responsive, accessible layouts that improve usability and mobile-friendliness—key ranking factors in modern search algorithms.

/* Inline-block display */
.inline-block {
    display: inline-block;
    width: 100px;
    height: 60px;
    background: #f3e5f5;
    border: 2px solid #9c27b0;
    text-align: center;
    line-height: 60px;
    margin: 5px;
}

<div class="inline-block">Box 1</div>
<div class="inline-block">Box 2</div>
<div class="inline-block">Box 3</div>

🔹 Flex Display

CSS Flexbox (display: flex) provides a powerful, one-dimensional layout system for distributing space and aligning items within a container. With properties like justify-content, align-items, and flex-grow, you can create responsive navbars, card grids, and centered content with minimal code. Flexbox simplifies vertical and horizontal alignment, handles dynamic content gracefully, and reduces reliance on floats and positioning. It improves maintainability and adapts seamlessly across screen sizes. For SEO, Flexbox contributes to faster rendering, cleaner HTML, and better mobile experiences—all of which positively impact Core Web Vitals and search engine rankings through enhanced performance and usability.

/* Flex container */
.flex-container {
    display: flex;
    background: #e8f5e8;
    padding: 10px;
    border: 2px solid #4caf50;
    gap: 10px;
}

.flex-item {
    background: #c8e6c9;
    padding: 20px;
    border: 1px solid #4caf50;
    flex: 1;
    text-align: center;
}

<div class="flex-container">
    <div class="flex-item">Flex Item 1</div>
    <div class="flex-item">Flex Item 2</div>
    <div class="flex-item">Flex Item 3</div>
</div>

🔹 Grid Display

CSS Grid (display: grid) is a two-dimensional layout system that enables precise control over rows and columns for complex web designs. Using grid-template-columns, grid-gap, and placement properties, you can build magazine-style layouts, dashboards, and responsive galleries without extra markup. Grid works perfectly with Flexbox for nested layouts and supports modern features like auto-fit and minmax(). It reduces CSS complexity and improves rendering performance. For SEO, CSS Grid creates structured, semantic layouts that enhance content hierarchy, improve page speed, and deliver exceptional responsive experiences—key factors in Google’s page experience update and overall ranking criteria.

/* Grid container */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    background: #fce4ec;
    padding: 10px;
    border: 2px solid #e91e63;
}

.grid-item {
    background: #f8bbd9;
    padding: 20px;
    text-align: center;
    border: 1px solid #e91e63;
}

<div class="grid-container">
    <div class="grid-item">Grid 1</div>
    <div class="grid-item">Grid 2</div>
    <div class="grid-item">Grid 3</div>
    <div class="grid-item">Grid 4</div>
    <div class="grid-item">Grid 5</div>
    <div class="grid-item">Grid 6</div>
</div>

🔹 Hide Elements

Hiding elements in CSS can be done strategically using display: none, visibility: hidden, or semantic HTML techniques depending on the use case. While display: none removes elements from the layout entirely, visibility: hidden preserves space but makes content invisible. For accessibility and SEO, consider using aria-hidden or off-screen techniques for visual-only content. Properly hiding elements improves UX by reducing clutter, enabling responsive behavior, and supporting progressive disclosure. However, avoid hiding substantive content from search engines, as this can be considered cloaking. Ethical hiding practices enhance usability without harming SEO, contributing to better engagement metrics.

/* Different ways to hide elements */
.display-none {
    display: none; /* Completely removes from layout */
}

.visibility-hidden {
    visibility: hidden; /* Hides but keeps space */
}

.opacity-zero {
    opacity: 0; /* Transparent but still there */
}

<div>Visible Element</div>
<div class="display-none">Hidden with display: none</div>
<div>Another Visible Element</div>

<div>Visible Element</div>
<div class="visibility-hidden">Hidden with visibility: hidden</div>
<div>Another Visible Element</div>