CSS Margin and Padding: Shorthand and Centering

Spacing is what makes a design feel calm and professional rather than cramped. Padding adds space inside an element, and margin adds space outside it. Both properties share the same shorthand, so once you learn one, you know the other.

Beginners often underuse spacing and then try to fix the result with extra line breaks or empty elements. Clear, generous spacing set in CSS is easier to maintain and reads better on every screen size. In this lesson you'll learn when to use each property and the one behaviour that surprises almost everyone: margin collapse.

Padding vs margin: what's the difference?

Padding sits inside the border. It makes the element bigger and shows the element's background colour. Use it to give content breathing room inside a button or card.
Margin sits outside the border. It pushes other elements away and is always transparent. Use it to space elements apart from each other.

A quick test: if you want the background colour to extend into the space, use padding. If the space should look empty, use margin.

The clockwise shorthand

Both properties accept one to four values, going clockwise from the top: top, right, bottom, left. The word "TRouBLe" can help you remember the order.

You write	Means
`padding: 10px`	all four sides 10px
`padding: 10px 20px`	top and bottom 10px, left and right 20px
`padding: 10px 20px 30px`	top 10, left and right 20, bottom 30
`padding: 10px 20px 30px 40px`	top, right, bottom, left

You can also target one side with margin-top, padding-left and so on. Modern CSS adds margin-inline for left and right together, and margin-block for top and bottom together.

Centring a block with margin: auto

A block element with a set width or max-width can be centred horizontally with:

CSS

.page { max-width: 800px; margin: 0 auto; }

auto splits the leftover space equally between the left and right sides. This is how most websites keep their main content in a neat column in the middle of wide screens. It doesn't centre vertically; for that, see Flexbox.

Margin collapse

When two vertical margins touch, they don't add together. The larger one wins. A paragraph with margin-bottom: 20px followed by a heading with margin-top: 30px leaves a 30px gap, not 50px.

This only happens with top and bottom margins on normal block elements. It doesn't happen with left and right margins, with padding, or between items in a flex or grid layout.

CSS Margin and Padding Syntax

Spacing shorthand

margin: top right bottom left;
padding: 12px 20px;
margin: 0 auto;      /* centre a block */
margin-inline: auto; /* same, modern */

CSS Margin and Padding Summary

Padding is space inside the border; margin is space outside it.
The shorthand goes clockwise: top, right, bottom, left.
margin: 0 auto centres a block that has a width or max-width.
Touching vertical margins collapse, so the larger one wins.
Use gap for spacing between items in Flexbox and Grid.

CSS Margin and Padding Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Padding vs margin

<button class="a">Padding 4px</button>
<button class="b">Padding 14px 28px</button>
<div class="spaced">I have 30px margin all round</div>
<div class="spaced">So do I, but our gap is 30px, not 60px</div>

button { border: 2px solid #15161b; background: #ffd23f; font-size: 1rem; }
.a { padding: 4px; }
.b { padding: 14px 28px; }

.spaced {
  margin: 30px;
  padding: 10px;
  background: #e1e6ff;
}

ResultEdit the code, then press Run or Ctrl+Enter

Line-by-line explanation

Line 2Tiny padding makes the button feel cramped.
Line 314px vertically and 28px horizontally gives a comfortable button.
Line 6Margin on all sides. Between the two divs, the vertical margins collapse to 30px.

Example 2

Centring a page

<main class="page">
  <h2>My Blog</h2>
  <p>This column never gets wider than 360px and stays centred, however wide the screen.</p>
</main>

.page {
  max-width: 360px;
  margin: 0 auto;
  padding: 16px 24px;
  background: #fff1c2;
}

ResultEdit the code, then press Run or Ctrl+Enter

Line-by-line explanation

Line 2Limit the width so there's leftover space.
Line 30 on top and bottom, auto left and right = centred.
Line 4Padding keeps text off the edges.

Common CSS Margin and Padding Mistakes

Using margin to centre inline elements

Don't

span { margin: 0 auto; }

.parent { text-align: center; }
/* or make it a block with a width */

margin: auto centres blocks with a width. Inline elements are centred with text-align on their parent.

Expecting margins to add up

Don't

/* expecting 50px between them */
p { margin-bottom: 20px; }
h2 { margin-top: 30px; }

/* the gap is 30px because margins collapse */
/* use padding, or a flex/grid gap, if you need exact spacing */

Vertical margins between blocks collapse to the larger value.

CSS Margin and Padding in Real Projects

Spacing systems

Design systems use a spacing scale, such as 4, 8, 12, 16, 24, 32 and 48px, and only ever use those values. It's one reason professional sites feel consistent. You'll often see them stored as variables: --space-2: 8px.

CSS Margin and Padding Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Give the button 12px top/bottom and 24px left/right padding.

.btn {
  padding: ;
}

Multiple choiceeasy

Which property adds space inside the border?

Multiple choicemedium

What does margin: 5px 10px 15px 20px set the left margin to?

Fix the bugmedium

The article should be centred with a max width of 300px, and its text should have 20px of space from the edges. Fix the CSS.

<article class="post"><p>Centred article text.</p></article>

.post {
  max-width: 300px;
  margin: auto 0;
  margin-padding: 20px;
  background: #d6f4e4;
}

ResultEdit the code, then press Run or Ctrl+Enter

Checks

Left and right margins are equal (centred)
Padding is 20px

CSS Margin and Padding Quiz

3 questions to check what you learned.

margin: 0 auto on a block with a width does what?
- Removes all margins
- Centres it vertically
- Makes it full width
- Centres it horizontally
Two paragraphs: the first has margin-bottom: 40px, the second margin-top: 25px. What's the gap?
- 65px
- 25px
- 40px
- 15px
Can padding be negative?
- Yes
- No, only margins can be negative
- Only in flexbox
- Only with border-box

CSS Margin and Padding Challenge

Space out a pricing card

Style .price-card so it:

Has a max-width of 280px and is centred with auto margins
Has 24px padding on all sides
The .cta button inside has padding: 10px 20px and margin-top: 16px

<div class="price-card">
  <h3>Pro plan</h3>
  <p>£9 per month</p>
  <button class="cta">Choose Pro</button>
</div>

.price-card { background: #e1e6ff; border-radius: 16px; font-family: sans-serif; }
.cta { border: 0; background: #4467ff; color: white; border-radius: 8px; }

ResultEdit the code, then press Run or Ctrl+Enter

Checks

Max width 280px
Centred
24px padding
Button padding 10px 20px
Button margin-top 16px

Padding vs margin: what's the difference?

The clockwise shorthand

Centring a block with margin: auto

Margin collapse

CSS Margin and Padding Syntax

CSS Margin and Padding Summary

CSS Margin and Padding Examples

Common CSS Margin and Padding Mistakes

!Using margin to centre inline elements

!Expecting margins to add up

CSS Margin and Padding in Real Projects

Spacing systems

CSS Margin and Padding Exercises

CSS Margin and Padding Quiz

CSS Margin and Padding Challenge

Space out a pricing card

Related CSS topics

Using margin to centre inline elements

Expecting margins to add up