CSS Margins

Margin is the space outside an element's border. It creates invisible breathing room between one element and other elements around it. Think of margin as the gap between two pieces of furniture in a room — the furniture itself is untouched, but there is space separating them.

Margins are transparent — they do not have a background color. They simply push elements apart.

The margin Property

The margin property can be set for all four sides at once or for each side individually.

Individual Side Properties

div {
    margin-top: 20px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 15px;
}

Shorthand margin Property

All four sides can be set in one line using the shorthand margin property. The number of values determines how they are applied:

One Value — Same on All Four Sides

div {
    margin: 20px;  /* Top, Right, Bottom, Left = 20px */
}

Two Values — Top/Bottom and Left/Right

div {
    margin: 20px 40px;
    /* Top and Bottom = 20px */
    /* Left and Right = 40px */
}

Three Values — Top, Left/Right, Bottom

div {
    margin: 10px 20px 30px;
    /* Top = 10px */
    /* Left and Right = 20px */
    /* Bottom = 30px */
}

Four Values — Top, Right, Bottom, Left (Clockwise)

div {
    margin: 10px 20px 30px 40px;
    /* Top = 10px */
    /* Right = 20px */
    /* Bottom = 30px */
    /* Left = 40px */
}

A helpful way to remember the four-value order is the word TRouBLe — Top, Right, Bottom, Left.

margin: auto — Centering an Element

Setting the left and right margin to auto is the classic way to horizontally center a block element. The element must have a defined width for this to work.

.container {
    width: 800px;
    margin: 0 auto;  /* 0 on top/bottom, auto on left/right — centers the box */
}

This is one of the most commonly used CSS techniques for centering page content.

Negative Margins

Margins can also be negative values. A negative margin pulls an element closer to or overlapping with adjacent elements.

div {
    margin-top: -10px;  /* Moves the element 10px upward */
}

Negative margins should be used with care as they can cause elements to overlap unexpectedly.

Margin Collapse

A unique behavior in CSS is margin collapse. When two vertical margins (top and bottom) of adjacent block elements touch, they do not add up — instead, the larger margin wins and the smaller one collapses.

Example

h2 {
    margin-bottom: 30px;
}

p {
    margin-top: 20px;
}

One might expect the space between the heading and paragraph to be 50px (30 + 20). However, due to margin collapse, the actual space is only 30px — the larger value. This only happens with vertical (top and bottom) margins, not horizontal (left and right) ones.

margin: 0 — Removing Default Margins

Browsers add default margin values to elements like <body>, <h1>–<h6>, and <p>. These defaults can cause unexpected spacing. Many developers reset them at the start of a stylesheet.

* {
    margin: 0;
    padding: 0;
}

Complete Example

.article {
    margin: 40px auto;   /* 40px top/bottom, centered horizontally */
    width: 700px;
}

.article h2 {
    margin-bottom: 12px;
}

.article p {
    margin-top: 0;
    margin-bottom: 20px;
}

Summary

Margin creates space outside an element. It can be set with individual side properties or with the shorthand in 1, 2, 3, or 4 value formats. Using margin: auto is the standard way to horizontally center a block element. Margin collapse is an important behavior to understand when working with vertical spacing. Clearing default browser margins with margin: 0 gives full control over spacing from the start.

Previous lessons

Back to courses

Next lessons