margin vs padding
margin is transparent space outside the element. padding is space inside the border, between the content and the edge, and it takes on the element’s background.
Side-by-side comparison
#Where it sits relative to the border
Shows the element’s background
Negative values
Merging with a neighbor (collapsing)
Centering a block
Typical use
Example
#.card {
margin-bottom: 16px;
padding: 16px;
border: 1px solid #3f3f46;
border-radius: 10px;
}<div class="stage" style="padding: 0; background: repeating-linear-gradient(45deg, rgba(245,158,11,.12) 0 6px, transparent 6px 12px);">
<div class="card box" style="width: auto; display: block; margin: 16px;">Padding pushes the content away from the edge; margin pushes the whole card away from the background.</div>
</div>Definition and usage
#Both properties add free space, but at a different point in the box model. margin sits outside the element’s border and separates it from its neighbors, so it’s always transparent, and you can see through it to whatever is underneath. padding sits inside the border, between the content and the edge, so it inherits the element’s background and color: a button with padding "breathes," because the background stretches along with it.
The difference also shows up in behavior. margin can be negative, which pulls elements closer together or makes them overlap, and the vertical margins of two neighboring blocks sometimes merge into one, larger gap (collapsing). padding is never negative and never merges with anything.
In practice, the choice is simple: the space between cards, paragraphs or list items is margin, or, even better inside flex and grid containers, the gap property. The space between the content of a button, a field or a card and its edge is padding.
Syntax
#margin: <top> <right>? <bottom>? <left>?;
padding: <top> <right>? <bottom>? <left>?;More examples
#.avatar {
margin-left: -12px;
border: 2px solid #0c0c10;
}
.avatar:first-child {
margin-left: 0;
}<div class="stage" style="display: flex;">
<span class="box avatar" style="border-radius: 999px; margin-left: 0;">A</span>
<span class="box avatar" style="border-radius: 999px; margin-left: -12px; border: 2px solid #0c0c10;">N</span>
<span class="box avatar" style="border-radius: 999px; margin-left: -12px; border: 2px solid #0c0c10;">K</span>
</div>A negative margin overlaps the avatars, like the popular "who’s online" pattern.
.button-tight {
padding: 2px 4px;
}
.button-comfy {
padding: 10px 18px;
}<div class="stage" style="display: flex; gap: 10px; align-items: center;">
<button class="button-tight" style="border: 0; border-radius: 6px; background: #7c3aed; color: #fff;">Small</button>
<button class="button-comfy" style="border: 0; border-radius: 10px; background: #7c3aed; color: #fff;">Comfortable</button>
</div>A tappable area on a phone should be at least about 44px, and padding is exactly what decides that.
Good practices
#- Set the spacing between list items, cards or form fields through the container’s
gap, instead of margins on every element. - If an element "disappears" under its neighbor or grows too large, check padding first: with
box-sizing: content-boxit enlarges the element beyondwidth. - Margin between sections can be unpredictable because of collapsing. When in doubt, check the result in the developer tools.
Related entries
#- marginSets the outer space between an element and its neighbors.
- paddingSets the inner space between the content and the border.
- gapSets the spacing between items in a flex, grid, or multi-column container.
- box-sizingDecides whether width and height include the padding and border.
- borderShorthand that sets the width, style, and color of a border.
Spotted a mistake or missing an example? Write to us.