CSS Box Model

In the context of HTML, every element can be treated like a box, similar to a package we send by mail. Let's analyze this using a package example:

Package dimensions: each box has specific dimensions, such as height (height property) and width (width property).

Package border: a box can have a border, for example decorative paper, which corresponds to the border property in HTML.

Distance between packages: since we don't always know what's in a parcel, the package must maintain a certain margin from other parcels, which in HTML corresponds to the margin property.

Space inside the package: we can't pack an element larger than its size into a package, so we need to leave some space inside the box, known as padding in HTML.

With these observations in mind, you can better understand how HTML elements are treated as boxes and how they can be appropriately styled.

The illustration above describes the box model. We interpret each element on the page as a box that has its own dimensions. Remember that elements have dimensions even when we don't declare them. Also remember not to set height and width on all elements - this is a common mistake made by people who are just starting their adventure with styles.

Border is simply the border of an element. It can be, for example, a one-pixel outline of a card on a web page:

Margin is used to create spacing between elements:

Padding is used to create spacing inside a given element. An example could be a card where the text is 20px away from the section boundaries:

sandpack