The display Property
Prerequisites: Sizing elements
display controls how an element's box takes part in layout.
| Value | Behavior |
|---|---|
block |
Starts on a new line, fills the available width; width, height, and vertical margins apply |
inline |
Flows within text; width and height are ignored, vertical margins don't push lines apart |
inline-block |
Flows like text, but respects width, height, padding, and margins |
flex / grid |
A block-level flex or grid container (upcoming lessons) |
inline-flex / inline-grid |
The same, but flowing inline |
none |
Removed completely — no space, not announced by screen readers |
contents |
The box disappears and its children act as the parent's children |
<style>
span { width: 200px; height: 50px; padding: 4px; background: #eef; }
.ib { display: inline-block; }
.b { display: block; }
</style>
<p><span id="s1">inline</span> <span id="s2" class="ib">inline-block</span> <span id="s3" class="b">block</span></p>
<script>
for (const id of ["s1", "s2", "s3"]) {
const el = document.getElementById(id);
console.log(id, getComputedStyle(el).display.padEnd(12), "width used:", el.offsetWidth === 208 ? "yes" : "no");
}
</script>
s1 inline width used: no
s2 inline-block width used: yes
s3 block width used: yes
The inline span ignored width: 200px; the other two used it (200px
plus 4px padding on each side = 208px).
Hiding elements
| Technique | Takes space? | Visible? | Screen readers? |
|---|---|---|---|
display: none |
No | No | No |
visibility: hidden |
Yes | No | No |
opacity: 0 |
Yes | No | Yes (and still clickable) |
| "Visually hidden" class | No | No | Yes |
The visually hidden pattern hides text visually but keeps it for screen readers — for labels of icon buttons or skip links:
.visually-hidden:not(:focus):not(:active) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
The :not(:focus) part makes a hidden skip link reappear when a keyboard
user tabs to it.
Changing display doesn't change meaning
display: block on an a makes the link box fill its container — a
common trick for bigger click targets — but it's still a link. And
display: none on content hides it from everyone; don't use it to hide
things you want search engines or screen readers to see.
Practice
Make every link in .tags a small inline-block pill with padding, and
hide .desktop-only elements entirely.
Show solution
.tags a {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 999px;
background: #eee;
}
.desktop-only {
display: none;
}
With media queries (Level 2), you'd show .desktop-only again on wide
screens.