The Box Model, Spacing, and Typography

What you will learn

Explain content, padding, border, and margin.
Use box-sizing: border-box.
Choose resilient sizing units.
Create readable typographic rhythm and spacing.

The code from this chapter

Type these programs yourself. The predictions below are the exercises; the explanations are in the book.

6.3 Units and Readability

Type this into a file, predict the output, then run it.

CSS

:root {
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 2rem;
}

.card {
  padding: var(--space-m);
  margin-bottom: var(--space-l);
  width: min(100%, 40rem);
}

TPRM Lab 6.1: Predict the Box

Type this into a file, predict the output, then run it.

HTML

<div class="box">A box with padding, a border, and a margin.</div>

Type this one as well, and predict it before you run it.

CSS

* { box-sizing: border-box; }
.box {
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  margin: 16px 0;
}

TPRM Lab 6.2: Create a Reading Column

Type this into a file, predict the output, then run it.

CSS

body {
  margin: 0;
  font-family: Georgia, serif;
  line-height: 1.6;
}
main {
  width: min(90%, 70ch);
  margin-inline: auto;
  padding: 2rem 0;
}