Margin & Padding

Think of an element as a box. padding is the stuffing between the box walls and what's inside, and margin is the gap between this box and the boxes next to it. An easy way to tell them apart: the background color fills the padding but not the margin. To make a button bigger or move text away from the border, use padding. To separate two cards, use margin.

padding: 8px 16px means 8px top and bottom, 16px left and right. In normal flow, when two elements are stacked vertically, their margins merge into the larger one instead of adding up. This is called margin collapsing, and it confuses a lot of people.

In Flex and Grid, gap is the better way to space children. It's easier than writing a margin on each child.