Ch 2 · The Box Model · CSS
Topic 2 of 3 in CSS — Make It Beautiful — 3 lessons.
Padding, Border, Margin
Every element is a box: content → padding → border → margin. padding is space inside the border, border is the line drawn around the padding, and margin is space outside the border.
Width & box-sizing
You can set a box's size with width and height. The catch is that, by default, padding and border are added on top of the width you set, so a box can end up bigger than you asked for.
Shorthand & Centring
Every box has four sides, and you can set each one separately with properties like padding-top or margin-left. Writing four lines each time gets tiring, so CSS lets you set several sides in one shorthand value.