CSS Box Model Padding, Border, Margin

What is the Box Model?

The CSS box model is the foundation of spacing in every web page. When a button looks too wide, a card refuses to align, or two headings have a strange gap between them, the answer is usually hidden in content width, padding, border, or margin.

Think of each element as a box with four layers. Content is the text or image itself, padding creates breathing room inside the box, border draws the edge, and margin pushes neighboring boxes away. Learning this model makes layout debugging much easier because you can inspect each layer separately in browser DevTools.

Every HTML element is treated as a rectangular box. The CSS Box Model describes the space an element occupies, consisting of four layers from inside to outside:

Content - the actual text, image, or other content
Padding - transparent space between content and border
Border - a line surrounding the padding
Margin - transparent space outside the border, separating elements

Box Model - Margin, Border, Padding

.box {
    /* Content */
    width: 300px;
    height: 150px;

    /* Padding - inside the border */
    padding: 20px;              /* all sides */
    padding: 10px 20px;         /* top/bottom  left/right */
    padding: 10px 20px 15px;    /* top  left/right  bottom */
    padding: 10px 20px 15px 5px; /* top right bottom left (clockwise) */

    /* Border */
    border: 2px solid #3498db;
    border-width: 2px;
    border-style: solid;        /* solid | dashed | dotted | double | none */
    border-color: #3498db;
    border-radius: 8px;         /* rounded corners */

    /* Individual sides */
    border-top: 3px solid red;
    border-right: 1px dashed gray;
    border-bottom: 2px solid blue;
    border-left: none;

    /* Margin - outside the border */
    margin: 20px;               /* all sides */
    margin: 10px auto;          /* center horizontally */
    margin-top: 30px;

    /* Negative margins are valid */
    margin-top: -10px;          /* pulls element up */
}

/* Total width = 300 + 20+20 (padding) + 2+2 (border) = 344px */

/* Margin collapse - vertical margins between siblings collapse */
/* to the larger of the two values, not their sum */
p { margin-bottom: 20px; }
h2 { margin-top: 30px; }
/* Gap between h2 and p = 30px (not 50px) */

box-sizing Property

By default (content-box), padding and border are added to the specified width. With border-box, padding and border are included in the width - making layout much more predictable.

content-box vs border-box

/* content-box (default) - padding/border ADDED to width */
.content-box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    /* Actual rendered width = 200 + 40 + 4 = 244px */
}

/* border-box - padding/border INCLUDED in width */
.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    /* Actual rendered width = 200px (content = 200-40-4 = 156px) */
}

/* Best practice - apply border-box globally */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Now width: 50% means exactly 50% of parent, regardless of padding */
.column {
    width: 50%;
    padding: 20px;  /* doesn't break the 50% layout */
}