display and box-sizing

Block and inline

Boxes are only half the story — the page also needs rules for how boxes flow around each other, or every element would need hand-placed coordinates. display is that rule, and misunderstanding it is why beginners fight with widths that "do nothing" on links and spans.

Every element has a display type that controls how its box flows:

• block: starts on a new line and stretches the full available width. h1, p, div, ul, and section are block by default.
• inline: flows within a line of text and is only as wide as its content. Width, height, and top/bottom margins are ignored. a, strong, and span (the inline cousin of div) are inline.
• inline-block: flows in the line like inline, but accepts width, height, and full padding like block.

a.button {
  display: inline-block;
  padding: 8px 16px;
}

And display: none removes the element from the page entirely. It takes up no space, as if deleted. JavaScript toggling elements in and out of display: none powers most show/hide UI, as you will see in unit 8.

box-sizing: border-box

In lesson 5-1, width: 200px plus padding 16 and border 2 rendered 236px wide, because width only sized the content. That default (called content-box) makes layout math miserable.

border-box changes the deal: width becomes the full box (content + padding + border), and the content shrinks to fit:

* {
  box-sizing: border-box;
}

With it, width: 200px; padding: 16px; border: 2px solid; renders exactly 200px wide, and the content quietly becomes 164px. Practically every real project puts this rule, with the * selector that targets everything, at the very top of the stylesheet. You will do the same in the capstone.