Margin and padding

The two kinds of space

The box model lesson introduced the layers. Now to use two of them: padding (space inside) and margin (space outside). Most of what makes a page feel comfortable rather than cramped is these two properties, used consistently.

<style>
  .note {
    background: #fef3c7;
    border: 2px solid #f59e0b;
    padding: 16px;      /* space between text and border */
    margin: 24px 0;     /* space above and below the note */
  }
</style>
<p>Paragraph before.</p>
<div class="note">A note with padding inside and margin around it.</div>
<p>Paragraph after.</p>

One to four values

Both properties accept shorthand. Remember it as clockwise from the top:

padding: 10px;                /* all four sides */
padding: 10px 20px;           /* top and bottom | left and right */
padding: 10px 20px 30px;      /* top | left and right | bottom */
padding: 10px 20px 30px 40px; /* top | right | bottom | left */

You can also set one side: padding-top, margin-left and so on. Modern CSS has logical versions that follow the writing direction, such as margin-inline (left and right in English) and padding-block (top and bottom). They matter for right-to-left languages like Arabic.

.card { padding-block: 12px; padding-inline: 20px; }

Units for spacing

Use rem or em for spacing that should grow with the text, and px for fine details such as 1px borders. Many designers pick a small scale (such as 0.5rem, 1rem, 1.5rem, 2rem) and reuse it so spacing feels consistent.

Centring with auto margins

A block element with a set width can be centred horizontally by letting the browser share the leftover space on both sides:

<style>
  .page {
    max-width: 320px;
    margin-inline: auto;   /* same as margin-left: auto; margin-right: auto */
    background: #dbeafe;
    padding: 12px;
  }
</style>
<div class="page">This block is centred in the preview, whatever its size.</div>

auto only works for horizontal centring of blocks. It needs a width (or max-width) smaller than the container; a block without one already fills the container.

Margin collapsing

This surprises everyone once. When the vertical margins of two blocks touch, they do not add up; they merge into one margin equal to the larger of the two.

<style>
  .a { margin-bottom: 40px; background: #fecaca; }
  .b { margin-top: 20px; background: #bbf7d0; }
</style>
<p class="a">Margin bottom: 40px</p>
<p class="b">Margin top: 20px</p>

The gap between them is 40px, not 60px. Margins also collapse between a parent and its first or last child when nothing (padding, border) separates them. Horizontal margins never collapse, and margins inside Flexbox and Grid containers do not collapse either.

A practical habit that avoids most surprises: pick a direction. For stacked content, set only margin-bottom (or only margin-top), or use the gap property you will meet in layout lessons.

Negative margins

Margins can be negative, which pulls an element toward its neighbour or lets it overlap:

.pull-up { margin-top: -12px; }

Use this rarely; it is easy to cause overlaps that break on other screen sizes. Padding can never be negative.

Percentages

Percentage margin and padding are calculated from the width of the containing block, even for top and bottom. padding-top: 56.25% gives a box whose height is 56.25% of its width, which was a classic way to keep a 16:9 shape before aspect-ratio.

Debugging spacing

When the space is wrong, open developer tools and inspect the element. Orange is margin, green is padding. Check for collapsing margins, and for padding added to a width you set (the box-sizing lesson explains the fix).

Common mistakes

• Using margin to add space inside a coloured box. Use padding so the colour reaches the edge.
• Adding space with empty paragraphs or <br> tags instead of margin.
• Expecting margin: auto to centre vertically in normal flow. Use Flexbox or Grid for that.
• Mixing margin-top and margin-bottom on stacked items and getting collapsed, inconsistent gaps.
• Centring an element with no width. It already fills its container.

Exercise

Style three stacked cards so each has 20px of padding, a light background, and exactly 16px between them. The group should be centred and no wider than 480px.

<style>
  .stack { max-width: 480px; margin-inline: auto; }
  .card { padding: 20px; background: #eef2ff; margin-bottom: 16px; }
  .card:last-child { margin-bottom: 0; }
</style>
<div class="stack">
  <div class="card">One</div>
  <div class="card">Two</div>
  <div class="card">Three</div>
</div>