Display Values
The display property controls how an element participates in layout. Common values include block, inline, inline-block, flex, grid, none, table, and newer multi-keyword display syntax.
display: none removes the element from layout and accessibility trees in typical browser behavior, while visibility: hidden generally keeps the element's layout space but hides it.
Display Controls Layout Participation
Display Modes
.toolbar {
display: flex;
}
.badge {
display: inline-block;
}
.desktop-only {
display: none;
}💡 Different display values establish different formatting contexts and layout behaviors.
Key Takeaways
display: noneremoves an element from layout.inline-blockallows inline participation with block-like dimensions.
Knowledge Check
What happens to layout space when `display: none` is applied?