Box Model

Each HTML element, beyond its customization through the CSS language, is enclosed in a "box" with the content inside (of any nature, from a text to an image) and, gradually, proceeding towards the external, a series of components: the padding, the border and the margin.

With the CSS, we can go to act by modifying the properties of these components.

The padding is the space between the content and the border.

The border is literally the edge of our box. We can extensively customize it, as it has various CSS properties that we will analyze later in our article.

Finally, the margin is the space outside the border.
Its role is to separate the element from other elements (separate, for example, one <div> from another).

Let's try to explain it to you better with a metaphor:
imagine you bought a pair of headphones from Amazon. You will certainly be thrilled to receive your package from the courier! But, have you ever thought that the package in question could be an excellent box model?
Let's explore the analogy better: in the case of your purchase

The border would be the cardboard of the box;
The padding would be its padding, which protects the content;
The content would be the headphones you purchased;
The margin would be the space between your box, sitting on the shelf, and the other items on that same shelf.

Much clearer that way, right?

It is important to note that two margins will not add up, but will overlap:

If we had, for example, two div each of them would have its own box-model; if we separated them using a margin of 20px each, we would not have a total separation space of 40px, but one of 20px.

Furthermore, if, for example, we were to give a background to the HTML element in question, this background would apply to the padding and border space, but would leave the margin space free, which - we reiterate - serves exclusively to separate the elements of the page HTML.

All 3 components of the box model accept a value in pixels (or in another of the units of measurement we have seen) to be set on 4 properties: top, right, bottom and left.

In the example below, in which we will define the margin of an element, you will be able to observe its syntax, which can be expressed in two ways:

mode 1

.element1 {
   margin: 10px 30px 25px 20px;
}

mode 2

.element1 {
   margin-top: 10px;
   margin-right: 30px;
   margin-bottom: 25px;
   margin-left: 20px;
}

Attention! There are two CSS properties, such as width and height, which serve, respectively, to define the width and height of our HTML document.

You could easily make the mistake of thinking that by setting the value of these two properties, you're actually going to modify the global size of the box-model: well, that's not the case!

When we assign a width and a height to an element, what will be resized is the CONTENT: the value of the rest of the box-model components will be added to that dimension.

This default behavior, however, can be changed with the help of the box-sizing property.

This property accepts two types of value:

content-box : the default value of the browser (which, as we have seen, in the event that an element has its own width, causes the value of the rest of the components to be added to the width);

example:
```
.element1 {
   box-sizing: content-box;
   width: 150px;
   padding: 50px;
   border: solid 10px red;
}
```
In this case, the total element will occupy 150px + 100px (padding left and padding right) + 20px (border left and border right), for a total of 270px.

Remember! You can also leave the box-sizing property unspecified if its value is content-box, because it is a default value.
border-box : the custom value that will make sure that, outlining an element's width, this includes the size of the rest of the components.
Example:
```
.element1 {
   box-sizing: border-box;
   width: 150px;
   padding: 50px;
   border: solid 10px red;
}
```
In this second case, the total will still be 150px. The components of the box model (except for the margin!!) will occupy part of the space reserved for the content, squashing it.

Here we highlight another big difference between margin and padding: with this setting, in fact, as the space dedicated to padding increases, the space dedicated to content will decrease. The padding will, therefore, "squeeze" the content. The border will follow the example of the padding.

By increasing the size of the margin instead, this will not squash the content, but will equally add dividing space between the elements, preserving the size of the content itself.

The properties of the border

As mentioned, the border in particular has several properties; let's see them:

border-style : defines the style of the border. It can be dashed, dotted, or solid ; you can apply it to all sides or just one, adjusting the syntax of the property as needed. (for example: border-top-style)
border-width : outline the size of the border; it can accept a single value for all sides or several values for each side; you can also change only one side through slight property name changes, like border-width-top, or bottom, and so on
border-color: refers to changing the color of the border. Here too, you can change the color of each single side in the same way as above
border-radius : serves to round off the corners of our border. It can accept pixel or percentage values. Depending on these values, our box can also become a circle, an ellipse, or have a pill effect. To better master the results of this setup, you can find border-radius generators online. Also for this property of the border you will have the possibility to modify all the sides or only some.

You can define all these characteristics of the border - with the exception of the border-radius - also using the generic "border" property, as in the example below:

.element1 {
   border: solid 10px red;
}

The properties of the border

Robort Gabriel

Lagos, Nigeria

Skills