CSS layouts (block vs inline)
This course explains normal flow, the layout algorithm browsers apply to every element by default. It covers block boxes, which take the full available width and stack vertically, and inline boxes, which flow with text and ignore width and height. It then introduces inline-block as a hybrid of the two. It compares display: none with visibility: hidden and opacity: 0. It also shows how to override an element's default display without changing its HTML meaning. The final lesson reads a small course card element by element.
What you'll learn
- ✓How normal flow lays out block and inline boxes by default
- ✓Which box model properties block and inline elements respect or ignore
- ✓When display: inline-block fits elements in a row that need real dimensions
- ✓How display: none, visibility: hidden and opacity: 0 differ
- ✓How to override a default display value while keeping the HTML meaning
- ✓How to read a page's layout from each element's display value
Normal flow: how the browser lays out content by default
Every page in this series so far was laid out correctly without a single layout rule. Headings stack above paragraphs, and a <strong> word sits inside its sentence instead of jumping to its own line. That's no accident. It's the browser's built-in layout algorithm, called normal flow, which runs on…
Read the full lesson free →Curriculum
7 lessonsNormal flow: how the browser lays out content by default
Normal flow is the browser's default layout, where each element's display value makes its box block or inline.
display: block — full width, stacked vertically
Block boxes take the full available width, start on a new line, and respect every box model property.
display: inline — flows with text, ignores width and height
Inline boxes size to their content, ignore width and height, and do not push lines apart vertically.
display: inline-block — the hybrid
Inline-block sits in a line like inline content while respecting width, height, padding and margin like block.
display: none vs visibility: hidden
display: none removes an element from the flow, while visibility: hidden keeps its space but paints nothing.
Overriding the default: changing any element's display
Changing display alters only layout, as in horizontal nav lists and full-card links, with one VoiceOver caveat.
Putting it together: reading a real page's flow
A small course card is read element by element to decide whether each box is block, inline or inline-block.