Thus far, our CSS output has looked kind of rectangular. That is because it’s in a box. And that makes sense, after all, since we’re using a rectangular screen!
Technically, everything on a web page is in a box. Every element on a page follows the box model:
The box model describes how an element handles its content and the space around it.
Every element is made of four box layers in the following order, from innermost to outermost:
- A content box for things like text and images.
- A padding box of space around the content.
- A border box that goes around the padding.
- A margin box of empty space that surrounds the whole element.