CSS formatting contexts evolved beyond simple “block vs inline,” but HTML content categories still hint at default behaviors.
Classic mental model
- Block-level elements (paragraphs, headings, lists) stack vertically and stretch to container width by default.
- Inline-level elements (links, emphasis) flow inside lines and wrap naturally.
CSS overrides everything
display: flex on an anchor makes it generate a flex container even though anchors default to inline. Always verify rendered boxes in DevTools—not assumptions from tag names alone.
Invalid nesting consequences
- Parsers auto-close tags when you accidentally nest blocks inside illegal inline parents.
- Interactive content rules forbid nesting interactive elements (
buttoninsidebutton, etc.).
Margin collapsing preview
Adjacent vertical margins between blocks may collapse—pairs with CSS lessons. Inline boxes participate in line layout with baselines and line-height.
What trips up experienced devs anyway
- Assuming “block/in-line” equals default
displayafter CSS resets—everything may be flex children with different sizing rules. - Wrapping anchors around block cards without checking hit areas + focus outlines—fine pattern, requires styling discipline.
- Mixing paragraphs and stray text nodes adjacent to blocks—validators flag it; parsers may hoist text unpredictably.
Important interview questions and answers
- Q: What makes image delivery accessible and performant?
A: Meaningful `alt`, correct intrinsic `width`/`height`, and responsive sources (`srcset`/`sizes` or `picture`) based on viewport needs. - Q: When do you use a table in HTML?
A: Only for real tabular data, not page layout; use `th`, `scope`, and `caption` to preserve structure for assistive tech. - Q: What is the role of the `head` element in production apps?
A: It provides critical metadata like charset, viewport, title, canonical/social tags, and linked resources used by browsers and crawlers.
Interview tip: Block boxes stack; inline boxes flow with text—know default display values.