Skip to main content
PProfileMatch
Read Play
← Path

CSS Fundamentals · CSS Box Model and Normal Flow: Margin, Padding, Border

0 XP
  1. 1 current stop: learning
  2. 2 upcoming
  3. 3 upcoming
  4. 4 upcoming
  5. 5 upcoming

Finish after stop 5

Stop 1 of 5 · Parcel depot: measuring boxes

Trick to keep in mind+3 XP

Default width is the content only: padding and border are added outside it.

With the default box-sizing, width describes just the content area. Padding and border sit around it and add to the painted size, once on each side. For example width: 100px with padding: 10px and a 2px border paints 100 + 20 + 4 = 124px wide.

.box { width: 100px; padding: 10px; border: 2px solid; }
/* painted width = 100 + 10 + 10 + 2 + 2 = 124px */

Read it once, then a question tests whether the trick stuck.