How the display property controls box generation and layout behavior
The difference between block, inline, and inline-block display types
When to use display: none vs visibility: hidden
Understanding display: contents for removing wrapper elements
How display values affect width, height, and margin/padding behavior
Introduction to Display
The display property is fundamental to CSS layout. It controls how an element generates
boxes and participates in the layout system. Every HTML element has a default display value, but
you can change it to achieve different layout behaviors.
Understanding display is crucial because it affects not just the element itself, but
how it interacts with surrounding elements. Different display values determine whether an element
takes up the full width available, flows inline with text, or is removed from the layout entirely.
display: block - Full-Width Stacking
Block-level elements start on a new line and stretch to fill the full available width of their
container. They stack vertically and respect all box model properties (width, height, margin, padding).
<div class="block-demo">
<p>Block Element 1</p>
<p>Block Element 2</p>
<p>Block Element 3</p>
</div>
Rendered Result:
display: inline - Text Flow
Inline elements flow with the text content and only take up as much width as their content requires.
They do not start on a new line and sit on the same line as adjacent inline elements. Importantly,
inline elements ignore width and height properties, and vertical margins/padding
may not behave as expected.
<p>
This is a paragraph with
<span class="tag">inline</span>
elements that
<span class="tag">flow</span>
with the text.
</p>
Rendered Result:
display: inline-block - Best of Both Worlds
Inline-block elements combine characteristics of both inline and block elements. They flow inline
like inline elements (don't force line breaks) but accept width, height, and all margin/padding
like block elements. This makes them perfect for creating button groups, navigation items, and
grid-like layouts without using actual grid or flexbox.
Elements with display: none are completely removed from the document flow and layout.
They take up no space and are not rendered at all. This is different from visibility: hidden,
which hides the element but still reserves its space in the layout.
/* Completely removes element from layout */
.gone {
display: none;
}
/* Hides element but keeps its space */
.invisible {
visibility: hidden;
}
display: contents - Removing the Box
The display: contents value causes an element's box to disappear, promoting its children
to take its place in the layout. This is useful when you need a wrapper element in HTML for semantic
or JavaScript purposes, but don't want it to affect the CSS layout.