CSS — Margins

What margins are

Margin = space outside an element, pushing neighbors away:

.box {
    border: 2px solid teal;
    margin: 24px;
}

What the browser displays

(The bordered box now floats 24px away from every neighboring element and page edge.)

        ↕ margin
┌──────────────────┐
│  ┌────────────┐  │
│  │  element   │  │  ← padding is INSIDE,
│  └────────────┘  │     margin is OUTSIDE
└──────────────────┘

Margin vs padding, one line each: padding pushes content inward; margin pushes other elements away.

Per-side control

.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
}

Clockwise shorthand — one line, four sides:

margin: 10px 20px 30px 40px;
/*      top right bottom left  */

margin: 16px 32px;      /* vertical | horizontal */
margin: 16px;           /* all four sides */

Memorize TRBL ("trouble") for the four-value order.

The star trick: auto centering

Block elements with a set width can be centered horizontally:

.container {
    width: 800px;
    margin: 0 auto;
}

0 top/bottom, auto left/right — the browser splits leftover space equally:

|←— auto —→┌────────┐←— auto —→|
           │ 800px  │
           └────────┘

This single line centers virtually every website's main column. margin-left: auto alone pushes an element fully right.

Margin collapse (the famous gotcha)

Vertical margins between stacked blocks merge into the larger one instead of adding:

h2 { margin-bottom: 40px; }
p  { margin-top: 20px; }

Expected gap: 60px. Actual gap: 40px — they collapse to whichever is bigger.

h2 bottom:  40px ┐
                 ├─ renders as one 40px gap
p  top:     20px ┘

Consequences in practice:

Gaps never "double up" between paragraphs
Debugging tip: when a margin seems ignored, its neighbor probably has a bigger one swallowing it

Collapse only happens vertically, only between adjacent block boxes — left/right margins always add up normally.

Negative margins

Margins accept negatives — pulling elements toward or over neighbors:

.badge {
    margin-left: -12px;    /* tuck under the previous element */
}

Useful occasionally (overlapping cards, tight logo lockups) but fragile — reach for positioning techniques first.

Typical real-world values

body        { margin: 0; }              /* reset browser default 8px */
.card       { margin-bottom: 24px; }    /* consistent vertical rhythm */
.section    { margin: 64px auto; }      /* big breathing room + centered */
.inline-icon{ margin-right: 6px; }      /* micro spacing */

The body reset is so universal that CSS resets start with it — browsers give <body> a default margin you almost never want.

Spacing habit: pick a scale (4/8/16/24/32/48…) and stick to it. Pages whose gaps come from an arbitrary-number generator look subtly wrong even to non-designers.

Mini Practice

Build three bordered boxes; give each margin: 16px and watch them separate
Change one to margin: 16px auto; width: 300px — centered box
Stack an h2 (margin-bottom: 50px) on a p (margin-top: 10px) — measure the collapse
Make a full-width banner hug the viewport edge by resetting body { margin: 0 }
Nudge a badge over a card corner using a negative margin

Next: padding →

Frequently Asked Questions about Margins

What is Margins in CSS?

Margins is a fundamental concept in CSS. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Margins?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Margins.

Why is Margins important in CSS?

Margins is essential for CSS development. Understanding this concept will help you write better code and solve real-world problems more effectively.