The Box Model

Four layers

From inside out: content (text/image), padding (space inside the border), border (the edge line), margin (space outside, between boxes).

Like a framed photo

Content is the photo, padding is the mat board around it, border is the frame, and margin is the wall space you leave before the next frame.

All four in one rule

Shorthand order for padding/margin/border-width: top, right, bottom, left.

.box {
  width: 200px;
  padding: 16px;
  border: 2px solid #333;
  margin: 10px 20px;   /* top/bottom 10px, left/right 20px */
}

Quick check: Going from inside to outside, what's the correct order?

• content → border → padding → margin
• content → padding → border → margin
• margin → border → padding → content