CSS Margin and Padding: Shorthand, auto Centering and Negative Margins

Padding is the space inside an element, between its content and its border. Margin is the space outside it, between the element and its neighbours. Both use the same syntax.

Individual sides#

.card {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;

  margin-bottom: 24px;
}

The shorthand: one to four values#

The margin and padding shorthands take one to four values, going clockwise from the top:

A way to remember the four-value order: TRouBLe (Top, Right, Bottom, Left).

div { background: #cfe3ff; border: 1px solid #2f5fe0; margin-bottom: 10px; }
.one { padding: 10px; }
.two { padding: 10px 40px; }
.four { padding: 4px 8px 24px 60px; }

<div class="one">padding: 10px</div>
<div class="two">padding: 10px 40px</div>
<div class="four">padding: 4px 8px 24px 60px</div>

Centering a block with margin: auto#

A block element with a set width (or max-width) can be centered horizontally with auto left and right margins. The browser splits the leftover space equally:

.container {
  max-width: 300px;
  margin: 0 auto;
  padding: 12px;
  background: #fff3c4;
}

<div class="container">I am centered in the page.</div>

This is the classic way to center a page's main column. margin: auto does not center vertically in normal flow; for that, see Centering Anything.

Negative margins#

Margins can be negative, pulling an element towards or over its neighbours:

.photo { height: 60px; background: #9cc9a8; }
.badge {
  margin: -20px 0 0 16px;
  display: inline-block;
  padding: 6px 12px;
  background: crimson;
  color: white;
  border-radius: 6px;
}

<div class="photo"></div>
<div class="badge">Overlapping badge</div>

Padding cannot be negative.

Logical properties#

Instead of physical directions (top, right, bottom, left), logical properties follow the direction of the text. In left-to-right languages, they map like this:

In right-to-left languages such as Arabic and Urdu, margin-inline-start becomes the right margin automatically. margin-inline: auto is a neat way to center a block.

gap: spacing between items#

In Flexbox and Grid layouts, gap puts space between items without adding it on the outside edges, which is simpler than margins on each item:

.row { display: flex; gap: 12px; }
.row span { padding: 8px 12px; background: #cfe3ff; }

<div class="row"><span>One</span><span>Two</span><span>Three</span></div>

Margin or padding?#

• Use padding for space inside a box: between a button's text and its edge, or a card's content and its border. Padding is clickable and shows the background.
• Use margin (or gap) for space between boxes.

Practice#

article {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 24px;
  background: #f6f7f9;
}
article p { margin: 0 0 12px; }

<article>
  <p>The first paragraph sits right at the top of the padding.</p>
  <p>Each paragraph is followed by 12px of space.</p>
</article>

Key takeaway#