2025-06-27 Web Development
CSS Display Types - Understand how elements behave in your layout
By O. Wolfson
CSS display
is one of the most important properties in web layout. It determines how elements appear and interact with other elements on the page. Here's a breakdown of the most commonly used display types and how they affect layout behavior:
display: block;
๐น block
Behavior:
- Takes up the full width of its container
- Starts on a new line
- Stacks vertically
Examples:
<div>
, <section>
, <p>
Use case: Structuring large containers and layout sections.
๐น inline
Behavior:
- Flows with text
- Does not respect width/height
- Padding and margins only apply horizontally
Examples:
<span>
, <a>
, <strong>
Use case: Styling small pieces of content within text.
Example: Highlight a word in a sentence:
html<div style="font-size: 16px;">
The quick <span style="display: inline; background: yellow;">brown</span> fox
jumps over the lazy dog.
</div>
The quick brown fox jumps over the lazy dog.
๐น inline-block
Behavior:
- Behaves like
inline
(flows with text) - But accepts width, height, margin, and padding
Use case: Buttons, badges, icons with spacing but still inline with text.
Example 1: Styled badge inside text:
html<div style={{ fontSize: "16px" }}>
Your order status:{" "}
<span
style={{
display: "inline-block",
background: "#0d9488",
color: "white",
padding: "2px 6px",
borderRadius: "4px",
}}
>
Delivered
</span>
</div>
Your order status:
Delivered
Example 2: 3 items side by side (without flex or grid):
html<div style={{ fontSize: 0 }}>
<div style={{ display: "inline-block", width: "100px", height: "80px", background: "#60a5fa", marginRight: "10px" }}></div>
<div style={{ display: "inline-block", width: "100px", height: "80px", background: "#34d399", marginRight: "10px" }}></div>
<div style={{ display: "inline-block", width: "100px", height: "80px", background: "#f87171" }}></div>
</div>
Example 3: Button-style elements:
html<div style={{ fontSize: "16px" }}>
<span
style={{
display: "inline-block",
background: "#3b82f6",
color: "white",
padding: "16px",
paddingTop: "14px",
paddingLeft: "18px",
paddingRight: "18px",
borderRadius: "6px",
cursor: "pointer",
}}
>
Click Me
</span>
</div>
Click Me
๐น flex
Behavior:
- Activates flexbox layout model
- Children become flex items
- Enables alignment, spacing, and reordering
Use case: One-dimensional layouts (e.g. nav bars, card layouts, toolbars)
css.container {
display: flex;
justify-content: space-between;
align-items: center;
}
๐น grid
Behavior:
- Activates grid layout model
- Enables precise control over rows and columns
- Children become grid items
Use case: Two-dimensional layouts (e.g. dashboards, complex forms)
css.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
}
๐น none
Behavior:
- Removes the element from the layout and flow
- Not rendered at all
Use case:
Temporarily hiding elements
(Use visibility: hidden
if you want to hide but keep layout space)
๐ง Summary Table
Display Type | Layout Style | Accepts Width/Height? | Starts New Line? |
---|---|---|---|
block | Full-width box | โ | โ |
inline | Text flow | โ | โ |
inline-block | Inline + box | โ | โ |
flex | Flex container | โ | Depends on layout |
grid | Grid container | โ | Depends on layout |
none | Removed from layout | โ | โ |
โ When to Use What?
- Use block for structural containers.
- Use inline for text fragments.
- Use inline-block for compact components.
- Use flex for aligning items along a row or column.
- Use grid when you need rows and columns.
- Use none to completely hide an element.
Let me know if youโd like an interactive version or a visual diagram to accompany this!