Markup CityISSUE #21 of 39

block vs inline · the two flow modes

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysBlock elements stack and fill the width; inline elements sit in the text flow and only take the space they need.

Every element has a default display. Block elements (<div>, <p>, <h1>, <section>) start on a new line and stretch the full available width. Inline elements (<span>, <a>, <strong>) flow within a line and are only as wide as their content.

This distinction drives layout. You can't set width/height or top/bottom margins on a pure inline element — switch it to inline-block or block with CSS when you need box control.

Power-ups you unlock

Block: new line, full width (div, p, h1, section)
Inline: in-flow, content-width (span, a, strong)
Width/height and vertical margins are ignored on inline elements
CSS display can switch any element between the two

The Unclosed Tag attacks — common mistakes

Setting width on an inline <span> and wondering why nothing changes
Putting a block element inside an inline one (invalid nesting)
Using <div> for everything when a semantic block exists

Boss battlePut a <span> and a <div> with the same border in the sandbox. Notice the div fills the width and the span hugs its text.

Example code

<!doctype html>
<html><head><meta charset="utf-8">
<style>.box{border:1px solid #b388ff;padding:6px;margin:6px 0}</style>
</head>
<body style="background:#06040d;color:#e6e0ff">
  <div class="box">block — fills the width</div>
  <span class="box">inline — hugs content</span>
  <span class="box">another inline</span>
</body></html>

▶ Open the interactive comic issue

‹ Lists · Ul · Ol · Dl Div · The Generic Container ›