display (block, inline, inline-block, none)
The `display` property defines how an element is rendered in the document flow, affecting its layout behavior and interaction with other elements.
element { display: block; }
element { display: inline; }
element { display: inline-block; }
element { display: none; }This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.
What it does
Overview
The `display` property defines how an element is rendered in the document flow, affecting its layout behavior and interaction with other elements.
The `display` CSS property is fundamental to controlling the layout and behavior of HTML elements. It determines the type of rendering box an element generates, influencing how it interacts with its siblings and how `width`, `height`, `margin`, and `padding` are applied. - `block`: Elements with `display: block` start on a new line, take up the full available width (unless explicitly set), and allow `width`, `height`, `margin-top`, `margin-bottom`, `padding-top`, and `padding-bottom` to be applied. Examples include `<div>`, `<p>`, `<h1>`. - `inline`: Elements with `display: inline` do not start on a new line and only take up as much width as necessary for their content. `width`, `height`, `margin-top`, and `margin-bottom` have no effect, though horizontal padding and margin are applied. Examples include `<span>`, `<a>`, `<strong>`. - `inline-block`: This value combines characteristics of both `inline` and `block` elements. `inline-block` elements flow like `inline` elements (they don't force a new line), but they accept `width`, `height`, and all `margin` and `padding` properties like `block` elements. This is incredibly useful for creating grid layouts or aligning elements horizontally while maintaining control over their dimensions. - `none`: Elements with `display: none` are completely removed from the document flow. They do not take up any space, and their content is not rendered. This is often used to hide elements dynamically with JavaScript. Understanding these core `display` values is crucial for building effective and responsive layouts. Modern CSS also introduces `flex` and `grid` as `display` values, which are specialized block-level layout contexts.
Quick reference
Syntax
element { display: block; }
element { display: inline; }
element { display: inline-block; }
element { display: none; }See it in practice
Examples
Block-level elements
<style>
div { background-color: lightblue; margin: 5px; padding: 10px; }
</style>
<div>Block 1</div>
<div>Block 2</div>Two blue blocks, each on its own line, taking full available width.
By default, `div` elements are `display: block`. They stack vertically, and `margin` and `padding` apply to all sides.
Inline elements
<style>
span { background-color: lightgreen; margin: 5px; padding: 10px; }
</style>
<span>Inline 1</span><span>Inline 2</span>Two green inline elements on the same line. Vertical margin/padding have no visual effect on layout.
By default, `span` elements are `display: inline`. They flow horizontally, and vertical `margin`/`padding` do not affect their position relative to other lines of text.
Inline-block elements
<style>
.item {
display: inline-block;
width: 100px;
height: 50px;
background-color: lightyellow;
margin: 10px;
text-align: center;
line-height: 50px;
}
</style>
<div class="item">Item A</div><div class="item">Item B</div>Two yellow boxes, each 100px wide and 50px tall, positioned side-by-side with 10px margin around them.
Elements with `display: inline-block` behave like inline elements in terms of flow but respect `width`, `height`, and full `margin`/`padding` properties, making them ideal for grid-like layouts before Flexbox/Grid.
Hiding an element with `display: none`
<style>
.hidden-box {
display: none;
background-color: lightcoral;
width: 50px;
height: 50px;
}
</style>
<div>Visible Box</div>
<div class="hidden-box">Hidden Box</div>
<div>Another Visible Box</div>Two visible boxes. The 'Hidden Box' is completely absent from the layout, as if it were never in the HTML.
Setting `display: none` completely removes the element from the document flow. It takes up no space and is not rendered, affecting the layout as if it didn't exist.
Debug faster
Common Errors
Incorrect Margin/Padding on Inline Elements
Cause: Attempting to apply vertical `margin` or `padding` to `display: inline` elements and expecting them to affect layout.
Fix: Remember that `display: inline` elements only respect horizontal `margin` and `padding`. If you need vertical spacing or to control `width`/`height`, change the `display` property to `block` or `inline-block`.
span { margin-top: 20px; } /* Will have no effect on vertical spacing */Runtime support
Compatibility
Source: MDN Web Docs
Common questions
Frequently Asked Questions
The `display` property defines how an element is rendered in the document flow, affecting its layout behavior and interaction with other elements.
Incorrect Margin/Padding on Inline Elements: Remember that `display: inline` elements only respect horizontal `margin` and `padding`. If you need vertical spacing or to control `width`/`height`, change the `display` property to `block` or `inline-block`.