Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
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.
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
/* 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.
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