The display Property
The property that controls how elements lay out — block, inline, inline-block, or hidden.
What you will learn
- Switch between block, inline and inline-block
- Hide elements with display: none
- Understand display vs visibility
The main values
| Value | Behaviour |
|---|---|
block | Full width, starts a new line (div, p, h1) |
inline | Flows in a line, ignores width/height (span, a) |
inline-block | Flows in a line BUT accepts width/height/padding |
none | Removed completely (takes no space) |
flex / grid | Powerful layout modes (next units) |
<style>
.tag {
display: inline-block; /* sits in a row but takes box sizing */
background:#4338ca; color:#fff; padding:8px 14px; border-radius:8px; margin:4px;
}
.gone { display: none; } /* not shown, no space */
</style>
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JS</span>
<p class="gone">You cannot see me.</p>
<p>The hidden paragraph above leaves no gap.</p>The three .tag spans normally would sit awkwardly (a plain <span> ignores width and padding). Giving them display: inline-block lets them stay in a row like text but also accept padding, border-radius and margin — so they become neat pill-shaped tags. The .gone paragraph has display: none, which removes it completely: you cannot see it and it leaves no empty space — that is why the final sentence sits right where the hidden paragraph would have been.
Note: display: none removes the element and its space entirely. visibility: hidden hides it but keeps its space (leaves a gap). Choose based on whether you want the gap.
Q. Which display value flows inline but still accepts width, height and padding?
✍️ Practice
- Turn three inline links into
inline-blockbuttons with padding. - Hide an element with
display: noneand another withvisibility: hidden; compare the gaps.
🏠 Homework
- Make a row of “skill tag” pills using
inline-block.