The box model: content, padding, border and margin

Every element on a page is drawn as a rectangular box, even when it looks round or irregular. Understanding how that box is built explains most spacing and sizing surprises in CSS.

The four areas

From the inside out, each box has:

1. Content. The text, image or child elements.
2. Padding. Space between the content and the border. It shows the element's background.
3. Border. A line around the padding. It can be zero width.
4. Margin. Space outside the border that pushes other boxes away. It is always transparent.

+-------------------- margin --------------------+
|  +------------------ border ----------------+  |
|  |  +-------------- padding --------------+  |  |
|  |  |                                     |  |  |
|  |  |              content                |  |  |
|  |  |                                     |  |  |
|  |  +-------------------------------------+  |  |
|  +-------------------------------------------+  |
+-------------------------------------------------+

.card {
    width: 300px;
    padding: 20px;
    border: 2px solid #334e68;
    margin: 24px;
    background-color: #f0f4f8;
}

The background colour fills the content and padding, and runs under the border. The margin stays clear.

Calculating the rendered size

By default, width and height set the size of the content area only. Padding and border are added on top.

For the .card above:

The margin (24px on each side) is not part of the visible box, but it takes up space in the layout. The card needs 392px of horizontal room in total.

This default is called content-box sizing, and it surprises almost everyone. You set width: 300px and get a 344px box. The next lesson shows how box-sizing: border-box makes width include padding and border, which is what most developers expect.

Shorthand for padding and margin

padding and margin accept one to four values. They go clockwise from the top:

.a { padding: 1rem; }                 /* all four sides */
.b { padding: 1rem 2rem; }            /* top and bottom, left and right */
.c { padding: 1rem 2rem 0.5rem; }     /* top, left and right, bottom */
.d { padding: 1rem 2rem 0.5rem 0; }   /* top, right, bottom, left */

You can also set one side at a time: padding-top, margin-left and so on.

Logical properties

Modern CSS also has logical versions that follow the writing direction instead of physical sides:

.callout {
    padding-block: 1rem;         /* top and bottom in English */
    padding-inline: 1.5rem;      /* left and right in English */
    margin-block-end: 2rem;      /* bottom in English */
}

In a left-to-right language, inline means horizontal and block means vertical. In right-to-left languages such as Arabic, padding-inline-start automatically becomes the right side. Logical properties are well supported and a good habit for sites that may be translated.

Centring with auto margins

A block element with a set width can be centred horizontally with auto side margins:

.page {
    max-width: 60rem;
    margin-inline: auto;   /* same as margin-left: auto; margin-right: auto; */
}

The browser splits the leftover space equally on both sides.

Borders

The border shorthand sets width, style and colour:

.box {
    border: 1px solid #d9d9d9;
    border-bottom: 4px solid #0b5394;
}

A border with no style is invisible. border: 2px red shows nothing, because the default style is none. Always include solid, dashed or another style.

Margin collapsing

Here is the rule that confuses the most people. When two vertical margins of block elements touch, they do not add up. They collapse into one margin the size of the larger.

<h2 class="title">Opening hours</h2>
<p class="text">Monday to Friday.</p>

.title {
    margin-bottom: 2rem;
}

.text {
    margin-top: 1rem;
}

The gap between the heading and paragraph is 2rem, not 3rem. The 1rem margin is absorbed by the larger one.

When margins collapse

1. Adjacent siblings: the bottom margin of one block and the top margin of the next.
2. Parent and first or last child: if nothing separates them (no border, no padding, no content), a child's top margin collapses through its parent and appears outside it.
3. Empty blocks: an element with no content, padding or border has its own top and bottom margins collapse together.

Case 2 is the classic bug:

<section class="banner">
    <h1>Welcome</h1>
</section>

.banner {
    background-color: #102a43;
    color: white;
}

h1 {
    margin-top: 2rem;
}

You expect a 2rem gap inside the dark banner above the heading. Instead the banner's top edge moves down 2rem and the space appears above it, outside the background.

How to stop collapsing

Any of these separate the margins:

.banner {
    padding-top: 1px;          /* any padding or border */
}

.banner {
    display: flow-root;        /* creates a new formatting context */
}

Better still, use padding for space inside containers and margin for space between siblings.

A simple spacing strategy

Many teams avoid collapsing surprises by setting margins in one direction only:

h1, h2, h3, p, ul, ol {
    margin-top: 0;
    margin-bottom: 1rem;
}

With only bottom margins, siblings never have two margins touching each other.

Negative margins

Margins can be negative. A negative margin pulls an element towards its neighbours or out of its container:

.full-width-image {
    margin-inline: -1.5rem;   /* extend past the card's padding */
}

Use this sparingly and comment why. Padding can never be negative.

Summary

• Every element is a box: content, padding, border and margin.
• By default width sets the content only; padding and border are added on top.
• Shorthand values run clockwise from the top; logical properties follow the writing direction.
• Vertical margins between blocks collapse into the larger one, including through parents.
• Prevent collapsing with padding, a border or display: flow-root, or use gap in flex and grid layouts.