CSS Box Model: margin, padding, border, and box-sizing

The four layers

Every element has content, padding, border, and margin. The default box model adds padding and border TO the content width.

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

/* Default (content-box): */
/* Total width = 200 + 20 + 20 + 5 + 5 = 250px */
/* width only sets the content area */

/* border-box (intuitive): */
/* Total width = 200px (includes padding and border) */
/* Content area = 200 - 20 - 20 - 5 - 5 = 150px */

box-sizing: border-box

border-box makes width include padding and border, which is far more intuitive for layout.

/* Apply globally (standard practice) */
*, *::before, *::after {
    box-sizing: border-box;
}

.card {
    width: 300px;
    padding: 24px;
    border: 1px solid #ccc;
    /* With border-box: total is exactly 300px */
    /* Without border-box: total would be 350px */
}

Margin shorthand

Margin and padding shorthand can take 1, 2, 3, or 4 values.

/* 1 value: all sides */
margin: 10px;

/* 2 values: top/bottom, left/right */
margin: 10px 20px;

/* 3 values: top, left/right, bottom */
margin: 10px 20px 30px;

/* 4 values: top, right, bottom, left (clockwise) */
margin: 10px 20px 30px 40px;

/* Center horizontally */
.container {
    width: 800px;
    margin: 0 auto;  /* top/bottom: 0, left/right: auto */
}

Margin collapse

When two vertical margins meet, they collapse to the larger value — they don't add.

.paragraph-1 {
    margin-bottom: 30px;
}

.paragraph-2 {
    margin-top: 20px;
}

/* Space between them: 30px (NOT 50px) */
/* The margins collapse to the larger value */

/* Margin collapse does NOT happen with: */
/* - horizontal margins */
/* - flexbox/grid items */
/* - floated elements */
/* - elements with padding or border between them */

Exam tip

The box-sizing question is always asked: "What's the difference between content-box and border-box?" — content-box: width is content only, padding/border add to it. border-box: width includes padding and border.