CSS Display
The display property might be the single most important property in all of CSS, because it decides how an element behaves in the overall layout: whether it stacks on its own line, sits inline with text, or becomes a container that arranges its own children in a completely different way.
block elements (like div and p) stack vertically and take up their own full line. inline elements (like span and a) flow within text and can't have their width or height directly set. inline-block blends the two, flowing like inline but accepting width and height like block. display: none removes an element from the page entirely. And flex and grid turn an element into a powerful layout container for arranging its children.
Understanding display is the foundation for building any real layout on a site like cookiescursor.com, since it controls the basic behavior every single element starts from.
In this page:
Syntax
selector {
display: block | inline | inline-block | flex | grid | none;
}block, inline, and inline-block
block elements take up the full width available and always start on a new line. inline elements flow within surrounding text and only take up as much width as their content needs. inline-block behaves like inline for flow, but accepts width, height, and vertical margin like a block element.
Note:
- If you need an element to sit beside other content but still needs a set width or height, inline-block is often exactly what you want.
- Accepted values:
- block — full width, starts on a new line
- inline — flows within text; ignores width and height
- inline-block — inline flow, accepts width and height
- none — removes the element from layout
- flex — one-dimensional flex container
- grid — two-dimensional grid container
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
Width and height declarations on a true inline element are simply ignored by the browser.
Example: block, inline, and inline-block
<style>
.block {
display: block;
background: dodgerblue;
color: white;
padding: 6px;
}
.inline {
display: inline;
background: coral;
color: white;
padding: 6px;
}
.inline-block {
display: inline-block;
width: 100px;
background: mediumseagreen;
color: white;
padding: 6px;
}
</style>
<div class="block">Block</div>
<span class="inline">Inline</span>
<span class="inline-block">Inline-block</span>display: none
display: none removes an element from the page entirely, both visually and from the document's layout flow, as if it were never there at all.
Note:
- display: none is commonly toggled with JavaScript to show or hide content dynamically, like an expandable FAQ answer.
- Accepted values:
- none — element generates no box and takes no space
- block — restores block display
- inline — flows within text
- inline-block — inline flow with block sizing
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
An element hidden with display: none is also removed from most assistive technology, so make sure hidden content really should be fully inaccessible.
Example: display: none
<style>
.hidden {
display: none;
}
</style>
<p>Visible paragraph</p>
<p class="hidden">Removed from layout entirely</p>display: none vs visibility: hidden
display: none removes an element and its space from the layout entirely. visibility: hidden makes an element invisible but still keeps its space reserved on the page, as if an invisible box were still sitting there.
Note:
- Use visibility: hidden when you want to preserve layout position (like avoiding a jump when content loads), and display: none when you want the element truly gone.
- Accepted values:
- visible — shown normally (initial value)
- hidden — invisible but still takes space
- collapse — hides table rows or columns; hidden elsewhere
- opacity — 0 to 1, also makes it invisible but stays clickable
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
Because visibility: hidden still reserves space, it can be surprising if you were expecting the layout to collapse the same way display: none does.
Example: display: none vs visibility: hidden
<style>
.gone {
display: none;
}
.invisible {
visibility: hidden;
}
</style>
<p class="gone">Gone, no space reserved</p>
<p class="invisible">Invisible, space reserved</p>
<p>Next element</p>display: flex
Setting display: flex on a container turns it into a flex container, giving you powerful, simple tools for arranging its direct children in a row or column, with easy control over alignment and spacing.
Note:
- flex is an excellent default choice for arranging a handful of items, like a navigation bar or a row of cards, in a single direction.
- Accepted values:
- flex — block-level flex container
- inline-flex — inline-level flex container
- flex-direction — row, row-reverse, column, column-reverse
- justify-content — flex-start, flex-end, center, space-between, space-around, space-evenly
- align-items — stretch, center, flex-start, flex-end, baseline
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
display: flex only affects the direct children of the container it's applied to, not deeply nested grandchildren further down the tree.
Example: display: flex
<style>
.container {
display: flex;
background: #eef;
padding: 10px;
gap: 8px;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
</div>display: grid
Setting display: grid on a container turns it into a grid container, letting you lay out its children into a genuine two-dimensional grid of rows and columns, ideal for more complex page layouts.
Note:
- Reach for grid when you need to control both rows and columns at once, like a card layout that needs to wrap into a fixed number of columns.
- Accepted values:
- grid — block-level grid container
- inline-grid — inline-level grid container
- grid-template-columns — e.g. repeat(3, 1fr)
- gap — spacing between rows and columns
- grid-template-areas — named layout regions
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
Grid and flex solve overlapping but different problems, grid excels at two-dimensional layouts, while flex is usually simpler for a single row or column.
Example: display: grid
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
</div>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Trying to set width and height on an inline element and being confused when nothing happens.
- Confusing display: none (removes the element entirely) with visibility: hidden (hides it but keeps its space).
- Reaching for float-based layouts out of habit instead of using flex or grid for modern layout needs.
Chapter Summary
- block elements stack on their own line; inline elements flow within text and ignore width/height.
- inline-block combines inline flow with block-style sizing control.
- display: none removes an element and its space entirely; visibility: hidden hides it but keeps its space reserved.
Browser Support
All standard CSS display values covered here, including flex and grid, are supported by every modern browser.
🔒
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: