CSS Display Property
The display property controls how an element behaves in the layout flow. Block elements stack vertically, inline elements flow with text, and inline-block combines both behaviors. display: none hides elements completely.
15 min•By Priygop Team•Updated 2026
Display Values
- block — Takes full width, starts on new line. Default for div, p, h1-h6, section, article
- inline — Only takes content width, flows with text. Default for span, a, strong, em. Cannot set width/height
- inline-block — Flows inline but accepts width/height. Best for buttons and nav items side by side
- none — Completely removes element from layout. Element is invisible AND takes no space
- flex — Turns element into a flex container (Module 4). Children become flex items
- grid — Turns element into a grid container (Module 5). Children become grid items
- visibility: hidden vs display: none — hidden keeps the space; none removes it entirely
Display Examples
Display Examples
/* Block vs Inline vs Inline-block */
span { display: block; }
/* Now <span> takes full width like a <div> */
div { display: inline; }
/* Now <div> flows inline like a <span> */
/* Inline-block: side-by-side with width control */
.nav-item {
display: inline-block;
width: 120px;
padding: 8px 16px;
text-align: center;
}
/* Hide elements */
.hidden { display: none; } /* Gone from layout */
.invisible { visibility: hidden; } /* Hidden but keeps space */
/* Show/hide for responsive design */
.mobile-only { display: block; }
.desktop-only { display: none; }
@media (min-width: 768px) {
.mobile-only { display: none; }
.desktop-only { display: block; }
}Tip
Use display: inline-block when you want elements side by side but still need to control their width and height. It's the simplest way to place buttons or nav items in a row before learning Flexbox.
Diagram
Loading diagram…
Display determines an element's rendering behavior
Common Mistake
Trying to set width or height on an inline element (like <span> or <a>). Inline elements ignore width and height properties. Change them to display: inline-block or display: block first, then set dimensions.
Quick Quiz
Key Takeaways
- The display property controls how an element behaves in the layout flow.
- block — Takes full width, starts on new line. Default for div, p, h1-h6, section, article
- inline — Only takes content width, flows with text. Default for span, a, strong, em. Cannot set width/height
- inline-block — Flows inline but accepts width/height. Best for buttons and nav items side by side