Padding & Margin

Definition

Padding is the space inside an element's border, giving the content room to breathe between itself and the edge. Margin is the space outside the border, setting the distance between an element and its neighbors. Both are "empty space," but they point in opposite directions — inside versus outside — and getting that one distinction straight clears up half of your layout headaches. Spacing is the value you'll reach for most on screen, and it's also the thing beginners mix up the most. So early on, keep a simple rule in your head: inside is padding, outside is margin. Say it a few times and it sticks faster than any diagram.

Why does it matter?

Spacing isn't just "the parts that are empty" — it's one of the most powerful tools you have for making information easy to read. When elements are spaced far enough apart, the eye separates them into clear chunks; when they sit close together, they read as one related group. That means the size of a gap alone can create grouping and hierarchy, silently telling the viewer what belongs together and where to look first. Well-tuned spacing tidies a screen without adding a single color or line. Get it wrong, though, and even the prettiest colors and fonts will look cluttered and cheap, because uneven gaps make everything feel restless. That's exactly why experienced designers sort out the spacing before they ever pick a color.

Common mistakes

• Confusing padding with margin and putting the value on the wrong side. If a card feels cramped inside, you need more padding, not margin; if cards are stuck together, you need more margin or a larger gap on the parent, not padding. Get the direction backwards and no amount of tweaking will give you the result you want.
• Picking spacing values off the top of your head each time. Random numbers like 12px, 15px, and 18px pile up across a screen, look subtly misaligned, and make maintenance painful because later you won't know what to change or by how much.
• Spacing related and unrelated elements by the same amount. When every gap is identical, the boundaries between groups disappear, so the structure of the information no longer reads at a glance and the viewer has to guess what belongs with what.

Practical tips

• Only pick spacing from a predefined scale, like multiples of 4 or 8. Narrowing your options to a handful of values makes each decision faster and keeps the whole screen in a consistent rhythm. This habit leads directly into the spacing-scale concept covered later.
• Agree on a rule across your team: inner breathing room comes from padding, and distance between elements comes from margin or the parent's gap. When each property has a clear job, you avoid the mistakes where values fight each other or stack up and throw off your math.
• Keep gaps tight within a group and wider between groups. The sharper that contrast, the more instantly the viewer sees which elements form a single chunk — no caption or label required.

Related concepts