border-box vs content-box

border-box and content-box are two values of the box-sizing property. Unlike the content-box, the border-box value indicates that the dimension of an element will also include the border and padding.

Let's assume that we have a div element whose size is 200px x 100px, the border and padding are 5px and 10px respectively.

.div {
    width: 200px;
    border: 5px;
    padding: 10px;
}

In the content box model, the content inside of element will have the same dimension as the element.

.div {
    /* ... */
    box-sizing: content-box;
}

// Content box
                    ◀︎──── 200px ────▶︎

┌───────────────────────────────────────────────────────┐
|                                                       |
|       ┌───────────────────────────────────────┐       |
|       |                                       |       |
|       |           ┌───────────────┐           |       |
| Border|  Padding  |    Content    |           |       |
|       |           |               |           |       |
|  5px  |    10px   |     200px     |   10px    |  5px  |
|◀︎─────▶︎|◀︎─────────▶︎|◀︎─────────────▶︎|◀︎─────────▶︎|◀︎─────▶︎|
|       |           |               |           |       |
|       |           └───────────────┘           |       |
|       |                                       |       |
|       └───────────────────────────────────────┘       |
|                                                       |
└───────────────────────────────────────────────────────┘

In the border box model, the content's dimension has to subtract the border and padding from the element's dimension. Specifically, the content's width is 200 - 5 * 2 - 10 * 2 = 170px.

// Border box
◀︎──────────────────────── 200px ────────────────────────▶︎

┌───────────────────────────────────────────────────────┐
|                                                       |
|       ┌───────────────────────────────────────┐       |
|       |                                       |       |
|       |           ┌───────────────┐           |       |
| Border|  Padding  |    Content    |           |       |
|       |           |               |           |       |
|  5px  |    10px   |     170px     |   10px    |  5px  |
|◀︎─────▶︎|◀︎─────────▶︎|◀︎─────────────▶︎|◀︎─────────▶︎|◀︎─────▶︎|
|       |           |               |           |       |
|       |           └───────────────┘           |       |
|       |                                       |       |
|       └───────────────────────────────────────┘       |
|                                                       |
└───────────────────────────────────────────────────────┘

border-box vs content-box

See also