CSS margin is the space outside an element’s border, while padding is the space between that border and the element’s content. Use margin to separate an element from its neighbors; use padding to create breathing room inside the element itself.
Both properties affect layout, but they act on different parts of the box model. Knowing which one to change helps you control spacing more predictably, avoid awkward gaps, and build interfaces that adapt to different screen sizes.
Where Margin and Padding Fit in the Box Model
Browsers lay out most elements as rectangular boxes. A box consists of content, padding, border, and margin, in that order from the inside out. The content may be text, an image, or other elements. Padding surrounds that content; the border surrounds the padding; and margin sits beyond the border.
This order gives a useful way to diagnose spacing. If text feels too close to a card’s edge, the likely adjustment is padding. If two cards feel too close to each other, the likely adjustment is margin or the layout container’s gap. The distinction is not merely visual: each property participates differently in sizing and layout.
How Padding Works
Padding adds space within an element’s border. It makes the content sit farther from the edge, and the element’s background is painted behind its padding. This is why padding is commonly used on buttons, cards, navigation links, and panels: it enlarges the comfortable interior area without creating a transparent gap outside the component.
For example, a button with a colored background and a small amount of padding may look cramped because its label sits near the border. Increasing the padding moves the label inward and generally makes the colored button area larger. Padding can also help give a clickable control a more generous target, although the visual and interaction requirements of a design should both be checked.
Padding can be set on each side separately, or with the shorthand property:
padding-top,padding-right,padding-bottom, andpadding-leftcontrol individual sides.padding: 1remapplies the same value to all four sides.padding: 1rem 2remsets vertical padding first and horizontal padding second.padding: 1rem 2rem 3remsets top, horizontal sides, then bottom.padding: 1rem 2rem 3rem 4remsets top, right, bottom, and left, in that order.
Padding values cannot be negative. They may use units such as pixels, rems, percentages, or other valid CSS length values. Percentage padding is calculated with reference to the containing block’s width, including for top and bottom padding, which can surprise developers expecting those sides to refer to height.
How Margin Works
Margin creates space outside an element’s border. It does not take on the element’s background color, so the area it creates generally shows the background behind the element or its parent. Margin is useful for separating paragraphs, positioning a component relative to nearby content, or setting space around a block.
Like padding, margin has individual side properties and a shorthand. A common pattern is margin: 0 auto on a block with a specified width or maximum width. The zero removes top and bottom margins, while the automatic left and right margins can center the block when the layout conditions allow it. This does not center text inside the block; text alignment is a separate concern.
Margins can be negative, unlike padding. A negative margin can pull an element toward or over nearby space, but it should be used deliberately: it can cause overlap, obscure content, or behave unexpectedly when the layout changes. Automatic margins also have layout-specific behavior, so they are not a universal substitute for alignment tools such as flexbox or grid.
Margin and Padding Compared
The practical differences are easiest to see side by side. The exact effect still depends on the element’s display type and its layout context, but these principles are a reliable starting point.
- Location: padding is inside the border; margin is outside it.
- Background: an element’s background extends through its padding, but not through its margin.
- Negative values: margin can be negative; padding cannot.
- Collapsing: some vertical margins between block elements can collapse; padding does not collapse.
- Typical purpose: padding creates internal room, while margin separates neighboring boxes.
- Box size: padding can contribute to an element’s rendered size, depending on box sizing; margin affects the space around it.
Imagine a paragraph inside a bordered notice. Padding moves the text away from the notice’s border. Margin moves the notice away from other content. Applying both is often appropriate: internal padding makes the notice readable, and external margin separates it from the surrounding page.
How the Box-Sizing Property Changes Width
A frequent source of confusion is whether padding is included in a declared width. With the default box-sizing: content-box, a declared width applies to the content box. Padding and borders are added outside that width, so the overall box becomes wider. For example, a box declared as a particular width may render wider after horizontal padding and borders are added.
With box-sizing: border-box, the declared width includes the content, padding, and border. The content area becomes smaller as padding or border thickness increases, while the outside width remains the declared value. This often makes responsive layouts easier to reason about. Margin remains outside the border under either sizing model.
When a box appears wider than expected, check its computed width, padding, border, and box-sizing value in the browser’s developer tools. Do not assume margin is the cause simply because the element occupies more space than the width you wrote.
Margin Collapse and Layout Gaps
Vertical margins between certain block elements may collapse: instead of adding together, adjacent margins can combine into a single margin whose size is generally the larger of the two positive margins. This behavior is one reason the visible distance between blocks may not equal the sum of their declared margins. Margin collapsing has specific rules and does not apply to every layout relationship.
Padding does not collapse. Adding padding to a parent can also change whether its child’s margin collapses through that parent, so a small padding value may appear to “fix” a spacing issue. That can be a valid design choice, but it is worth understanding the cause rather than adding unexplained values.
Modern layouts also provide gap for spacing between items in flex and grid containers. A gap belongs to the layout container and sets separation between its rows or columns; it is not margin or padding on each child. It is often a clearer choice when every item in a group should have consistent spacing, especially when items wrap or the layout changes direction.
Choosing the Right Property
Ask where the unwanted or needed space belongs. If the space should be part of the component’s colored or bordered surface, use padding. If it should separate the component from other elements, consider margin or a parent layout’s gap. If you are aligning or distributing a group of items, inspect the parent’s flexbox or grid rules before adding margins to individual children.
A practical way to make the choice is:
- Identify the visible boundary: content edge, border, or neighboring element.
- Decide whether the space should share the element’s background.
- Check whether the parent layout already controls spacing with gap, alignment, or distribution.
- Test the result at narrower and wider viewport sizes, including when text wraps.
For a card, padding commonly protects the text from the edges, while a grid gap separates the card from other cards. For a heading followed by a paragraph, margin may create the vertical separation. There is no rule that every component must use only one property; the best choice follows the intended boundary and layout responsibility.
Common Problems and Misconceptions
One misconception is that margin and padding are interchangeable ways to add space. They can produce a similar-looking gap in a simple example, but the background, border, box size, and neighboring layout behavior differ. A colored area that should extend behind the space is a strong clue to use padding rather than margin.
Another common issue is using margins on every child to space a list. This can leave unwanted space at the start or end, complicate wrapping, and make responsive changes harder. A parent’s gap may better express consistent separation. Conversely, margin remains useful when a particular element needs unique spacing from its surroundings.
Also avoid using padding to push one element away from another when doing so makes the component’s own background or click area larger than intended. Avoid using margin to create room inside a bordered box. Inspecting the element’s box model in developer tools is often faster than guessing: the browser can show content, padding, border, and margin as separate regions.
Frequently Asked Questions
Does padding go inside or outside the border?
Padding is inside the border, between the content and the border. Margin is outside the border.
Does margin affect an element’s background?
No. An element’s background is painted through its padding, but margin is outside that painted area. The visible margin area normally shows the background of what is behind it.
Can CSS margin be negative?
Yes. Negative margins are valid and can pull an element toward neighboring content, but they may cause overlap or responsive layout problems. Padding cannot be negative.
Why is the space between two elements not the sum of their margins?
Adjacent vertical margins of some block elements can collapse rather than add together. The result depends on the elements and their layout context; padding does not collapse.
Should I use margin or gap between flex or grid items?
Use gap when the parent layout should provide consistent spacing between its items. Use margin when an individual item needs its own outside spacing or when the layout does not provide the separation you want.
Does padding make an element wider?
With the default content-box sizing, padding adds to the declared content width. With border-box, padding is included within the declared width, so the content area shrinks instead.
Quick Summary
Padding controls space inside an element’s border and carries the element’s background; margin controls space outside the border and separates the element from its surroundings. Use padding for internal comfort, margin for element-specific external spacing, and flexbox or grid gap when a parent should manage consistent spacing among items. When a result looks unexpected, check box sizing, margin collapse, and the layout context before changing values at random.