display
Decides how an element behaves in the flow and how it lays out its content.
Syntax
display: value;Values
| Parameter | Type | Description |
|---|---|---|
| block | keyword | A block: starts on a new line, takes the full width. |
| inline | keyword | An inline element: within the line, without width and height. |
| inline-block | keyword | Within the line, but with width and height. |
| flex | keyword | A flexbox container. |
| grid | keyword | A grid container. |
| none | keyword | The element is hidden and takes no space. |
Examples
Block, inline and inline-block elements:
<style>
span { background: lavender; padding: 4px; }
.ib { display: inline-block; width: 100px; }
.b { display: block; }
</style>
<span>inline</span> <span>inline</span>
<span class="ib">inline-block</span>
<span class="b">block</span>A hidden element:
<p>A visible paragraph.</p>
<p style="display: none;">This paragraph is not on the page.</p>
<p>Another visible one.</p>Notes
display: none removes the element entirely, including for screen readers. To hide it but keep its space, use visibility: hidden. There are also inline-flex and inline-grid — containers that sit inside a line like text.
See also
- visibility — Hides an element but keeps the space it occupies.
- flex — A shorthand for how a flex item grows, shrinks and what size it starts from.
- grid-template-columns — The number and widths of the columns of a grid.
- <span> — An inline container without meaning: used to style part of a text.
Related recipes
- How to add an icon to a button
- How to add print styles
- How to hide an element
- How to make a horizontal menu from a list
- How to make a link look like a button
- How to make a masonry layout
- How to put items side by side
- How to show an element only on mobile or only on desktop
- How to swap elements
- How to use media queries
In the tutorial
- The display property — Block and inline elements, the values block, inline, inline-block and none, hiding elements.