The layout is one of the most powerful tools you can use in CSS — it can completely change how your website looks. But before moving on to that, we still need to learn a little bit of theory.

CSS Box Model

• The CSS Box Model is a series of positioning properties designed to help with layout.
• Each property works in a different way and positions the item with different spacing.
• The Box Model is the most commonly used way to position items.

This is what the box model looks like.

Each layer can be stretched and sized either symmetrically or asymmetrically.

The content is always in the center, and then there are all these invisible layers around it.

When you specify width and height values, those do not include padding and margins.

We can add box-sizing: border-box; to our CSS to make the total width and height of an element include border and padding.

Padding

It’s the space between the content and the border.