OnlineCBT
Choose how an element participates in layout
display controls the box an element generates and, for layouts such as flex and grid, how its children are arranged. Changing display does not change HTML semantics: an inline-looking button remains a button, while a block-looking span does not become a heading.
.block { display: block; }
.inline { display: inline; }
.badge {
display: inline-block;
padding: 0.25rem 0.5rem;
border: 1px solid #64748b;
}
.hidden { display: none; }Block versus inline
In ordinary normal flow, a block box begins a new block line and commonly uses the available inline space. Non-replaced inline boxes flow within text; explicit width and height do not work on them like a block's dimensions. Vertical margins on ordinary inline text also do not create the same line separation you may expect from a block.
Inline-block
An inline-block participates in the surrounding inline formatting while accepting box dimensions. It suits a small badge, but spaces or newlines between inline-block elements can create visible gaps. For an aligned toolbar, flex with gap is often easier than removing whitespace from HTML.
Hiding content
display:none removes the box from layout and normally from the accessibility tree. visibility:hidden hides painting while retaining layout space. opacity:0 makes content transparent but can leave controls focusable and interactive. These are different behavior choices, not interchangeable ways to hide a dialog.
Outer and inner display
display:flex gives a block-level flex container; inline-flex gives an inline-level flex container. Their children participate in flex layout, while the container itself still participates in its parent's layout. Distinguish the container's role from the items inside it.
Exercises
- Apply width:200px to a span under inline, inline-block and block and compare.
- Create a row of badges, then replace the layout with flex and gap.
- Hide a button using each hiding method and inspect layout and keyboard focus.
- Keep headings as heading elements even when their display changes.
