Padding & Margin

Padding is the space inside a box's edge, between the border and the content; margin is the space outside the box, pushing its neighbors away. Nearly every "can we get more space in here" conversation is secretly about which of the two you mean.

The way to keep them straight is a winter coat. Padding is the lining: it belongs to the coat and lives inside the shell. Margin is personal space: it belongs to nobody, and it decides how close strangers can stand on the platform. Inside the edge is padding, outside the edge is margin, and that sentence settles the argument for good.

The picture makes both visible on a card. The solid tinted zone inside the card's border is padding, holding the text and the button away from the edge. The striped zone wrapped around the outside is margin, and the neighboring card sits exactly at the stripes' edge because the neighbor can get no closer. Padding is upholstery; margin is a force field.

The distinction earns its keep because the two fix different complaints. Text crowding the edge of its button is a padding problem. Two cards glued together is a margin problem. Padding belongs to the box, so background color fills it and a finger landing there still counts as a tap; margin is empty street between buildings, owned by neither side. Name the right one and the fix is one line of code. Name the wrong one and you'll watch the wrong gap grow.

You'll also hear both lumped together as spacing, which works fine until somebody has to type actual numbers, and developers call the full diagram the box model. Between them, these two are how whitespace gets built: a designer decides where the breathing room goes, and padding and margin are the dials that put it there. When you ask for more space, say which side of the edge you mean.