How boxes line up by default
Before any layout tricks, the browser places elements in normal flow: blocks stack top to bottom, inline elements sit side by side in lines of text. The display property changes how a box takes part.
display values
- block — full width, starts on a new line (div, p, h1, section).
- inline — only as wide as its content; width and height are ignored (span, a, strong).
- inline-block — inline, but sized like a block.
- none — removed from the page entirely (and from screen readers).
- flex and grid — switch on modern layout for the element's children (next lessons).