Everything displayed by CSS is a box. Understanding how the CSS Box Model works is a core foundation of CSS.
- Content box, is the area that the content lives in, this controls the size of its parent. Imagine this as being your artwork inside.
- Padding box surrounds the content box and is the space created by the padding property. Padding is inside the box, which means the background of the box will be visible in the space that it creates. Imagine this as the space between your artwork and the artwork frame.
- Border box surrounds the padding box and its space is occupied by the border value. The border is used to visually frame an element. Imagine this as the picture frame providing a literal border for the artwork.
- Margin box, is the space around your box, defined by the margin rule on your box. Imagine this as the wall your artwork is on. Now consider having many artworks next to one another on the same wall, the margin box will be the space between those artworks. Properties such as outline and box-shadow, occupy this space too because they are painted on top.
Having content-box as the value of box-sizing means that when you set dimensions, such as a width and height, they will be applied to the content box. If you then set padding and border, these values will be added to the content box's size.
box-sizing: border-box; (CSS is being applied inside our Border box, Padding Box, and Content Box.)
