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  |
|◀︎─────▶︎|◀︎─────────▶︎|◀︎─────────────▶︎|◀︎─────────▶︎|◀︎─────▶︎|
|       |           |               |           |       |
|       |           └───────────────┘           |       |
|       |                                       |       |
|       └───────────────────────────────────────┘       |
|                                                       | 
└───────────────────────────────────────────────────────┘

More

Hit the Subscribe button for the latest news on my tools. No spam. Ever!
© 2020 Nguyen Huu Phuoc. All rights reserved