display controls how an element participates in layout.
| Value | Behavior |
|---|---|
block |
Starts on a new line, fills the available width (div, p, h1) |
inline |
Flows with surrounding text, ignores width/height (span, a) |
inline-block |
Flows like inline, but respects width/height/margin |
none |
Removed entirely — takes up no space, unlike visibility: hidden |
flex |
Turns this element into a flex container (see the Flexbox chapter) |
grid |
Turns this element into a grid container (see the Grid chapter) |
CSS
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: #eef2ff;
}
.tooltip {
display: none; /* hidden until JS toggles it, e.g. to display: block */
}display: none removes the element from layout entirely (surrounding
elements shift to fill the gap); visibility: hidden hides it visually
but keeps its space reserved.