CSS flashcards

10 cards. Answer in your head, flip, and be honest with yourself.

0Still learning1 / 10Know0

CSS Box Model

Every HTML element is a rectangular box composed of four layers from inside out.

text

┌─────────────────────────────┐
│           margin            │
│  ┌───────────────────────┐  │
│  │        border         │  │
│  │  ┌─────────────────┐  │  │
│  │  │     padding     │  │  │
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  content  │  │  │  │
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

box-sizing

By default (content-box) width/height apply only to the content area.

css
/* content-box - default, confusing */
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid;
  /* actual rendered width: 200 + 40 + 4 = 244px */
}

/* border-box - intuitive, use this */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid;
  /* actual rendered width: 200px - padding and border are inside */
}

Global reset (recommended)

css
*, *::before, *::after {
  box-sizing: border-box;
}

Property	box-sizing: content-box	box-sizing: border-box
width includes padding	No	Yes
width includes border	No	Yes
Predictable sizing	No	Yes

Always use border-box globally - it makes layouts predictable. Every modern CSS reset includes this rule.

space flip · ← → move · 1 still learning · 2 know it