CSS Box Model

Photo By Nick Karvounis on Unsplash

All HTML elements can basically be considered as a box. In CSS, understanding and managing the “CSS box model” is very important when building a design and layout.

Without understanding this, we may struggle to create complex layouts. For example, when we want to create a web page with 3 columns, 4 columns, and so on.

The CSS Box Model is essentially a box that wraps around an HTML element, consisting of margin, border, padding, and the actual size of the element itself. Take a look at the illustration below:

Have you ever expected the width of two elements to be 50%, but they didn’t sit side by side as expected? Or maybe you wanted an article with 3 columns, but what happened was 2 columns with the third one dropping below?

Such cases often happen if we don’t understand the following explanation.

Note :

When we set the width and height of an element, we are only setting the size of the content area from the image we saw above. To calculate the actual width or height, we need to add the padding, margin, and border that have been set on the element.

Look at the example below

If we observe, the two elements above are set with different sizes. However, when rendered, they end up with the same size. Why is that? It turns out the width and height of an element are affected by its border and padding. In the case above, this is what happens:

Width = 270px + 34px (left and right padding) + 6px (left and right border) + 0px (left and right margin).

After understanding the explanation above, to complete our knowledge and make layout building easier, we also need to know the box-sizing syntax in CSS. Box-sizing has values such as (padding-box, content-box, and border-box).

By default, all HTML elements are of the content-box type, as we explained earlier. Due to the behavior of content-box, sometimes it’s difficult to divide columns, especially when using percentages, because whatever we set will still add padding, margin, and border to the element.

Box-sizing was introduced in CSS3, and the most commonly used value today is border-box.
Why border-box? Because border-box behaves the opposite of content-box.

This type takes padding and border from the width/height we give to the element, so we don’t have to worry about its width/height increasing. Border-box makes responsive layout management easier.

In several modern frameworks, like Bootstrap, there is a reset applied to all HTML elements to make them border-box using the following syntax:

*{
box-sizing:
border-box;
}

Or in a more elegant way:
Box-sizing on elements follows the settings of their parent elements (inheritance), with the root element being html.

html{
box-sizing: border-box;
}
*, *:before, *:after{
box-sizing: inherit;
}

To better understand border-box, check out the example below (compare it with the previous example)

Column layout using the box-sizing: border-box technique

When box-sizing is changed to content-box or removed

Example of layout division using floating and box-sizing

That’s a brief explanation of the CSS Box Model. If you have any questions regarding this topic, feel free to ask in the comment section.

Keep Learning and Stay Motivated! ^_^

That’s the article that Mangcoding can share. Hopefully, this article is useful and provides new knowledge for you. If you have constructive feedback or suggestions, please leave a comment or send them via Email or Mangcoding’s social media.