Display
Control how an element is rendered in flow.
Syntax
display: block | inline | inline-block | none;The display property sets an element's box type:
block— takes the full width, starts on a new line (e.g.div,p).inline— flows within text, ignores width/height (e.g.span,a).inline-block— flows inline but accepts width and height.none— removes the element from the page entirely.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer sets display: none on a mobile menu panel to hide it by default and toggles it to display: block when the hamburger button is clicked.
- A designer changes a set of li elements from display: list-item to display: inline-block to create a horizontal navigation bar.
- A developer uses display: flex on a card row to align icon and text side by side without floats or positioning hacks.
More examples
Block vs inline elements
Contrasts inline (flows with text, no full-width take-over) versus block (starts on new line, takes full width).
span.tag {
display: inline;
background: #eef3ff;
padding: 2px 8px;
border-radius: 4px;
}
.section {
display: block;
width: 100%;
padding: 24px;
}inline-block for horizontal list
Uses inline-block on list items so they flow horizontally while still accepting padding and border-bottom for tab styling.
.tabs li {
display: inline-block;
padding: 10px 20px;
border-bottom: 3px solid transparent;
cursor: pointer;
}
.tabs li.active {
border-bottom-color: #2965f1;
}Hiding and showing with display
Hides a dropdown by default with display: none and reveals it on parent hover using display: block.
.dropdown {
display: none;
}
.nav-item:hover .dropdown {
display: block;
position: absolute;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
Discussion