CSS Box Model and box-sizing: What is border-box?

Tram Ho

Preface

This article is part 2 of the series about his box model. You can track all sections here:

Part 1: CSS Box Model – Basic for beginners
Part 2: What is CSS Box Model and box-sizing: border-box?
Part 3: CSS Box Model – Ways of displaying elements with display properties

The reason I chose to write about CSS Box Model

In the world of CSS or web layout in general, there are a lot of basics that an interface developer needs to master. But I chose Box Model to introduce first because it is very basic but extremely important in layout. I have seen other junior executives only deal with layout styles (try it wrong), write css based on instinct or personal experience, as long as the results are similar to the designs or they can work.

This has a lot of harms:

  • You will develop your own wrong experiences and use them over and over again.
  • There will be potential bug layouts and just waiting for one brick to break, the whole layout will break; you will be wondering where to fix or just try to find a way to patch the layout.
  • Your code will be difficult to maintain later, especially when new people come in.
  • Your code will be audited (if any) and badly evaluated if a third party looks at it.
  • Unstable knowledge is also very easy to squirm in interviews.

In the following articles, I will write about other very important and basic topics of CSS such as Inheritance, Cascade, Specificity, BFC, Flexbox, Grid …

Who is this article for?

Imagine being in an interview and being asked “What is a box model in CSS?”. If you feel you are not confident in answering this question, or just answer truncatedly “it talks about the padding, margin, border of the elements on the web page”, then this article is for you.

By default, you already have some basic knowledge about CSS, so I will not explain in detail what is outside the scope of the article.

What is the CSS Box Model?

One thing to keep in mind is that any element on a web page is a rectangular block, including circles, ovals, or short, long text:

All elements on a web page are rectangular blocks.

So to help the browser know how wide / high an element is to render correctly and correctly of the developer, the box model is what the browser relies on to calculate. More theoretically, box models in CSS are simply a set of rules and formulas for addition and subtraction to help the browser determine the width, height (and some other thing) of an element.

Components of Box Model

As I shared above, any element is a rectangular block, and it consists of 4 components: content, padding, border, and margin (it is best not to Vietnamize these words 😃). Each component has a corresponding external border: content edge, padding edge, border edge, margin edge.

Components of Box Model

  • content : is the content container of an element, with width / height defined by the width and height attributes. This area usually contains text, images, videos, etc.
  • padding : indicates the width of the padding area surrounding the content area
  • border : indicates the width (and style) of the border surrounding the padding area
  • margin : indicates the width of the margin area surrounding the border area

As a developer, you can easily see these properties of elements very intuitively through the browser DevTools.

Box model is visually illustrated on the browser dev tools

Default simple formula:

  • The width of a content element width = width + padding left + padding to + border left + border must
  • The height of a content element height = height + padding on + padding under + border on + border under

The corresponding css properties:

  • Width / height of content : width , height
  • Padding : padding , padding-left , padding-right , padding-top , padding-bottom
  • Border : border , border-left , border-right , border-top , border-bottom

Basic properties of box model

You may have noticed that you do not list margin in a formula. Although the margin is part of the box model and comes with the element, it does not count towards the width / height of the element.

Have you ever asked me how margin and padding are different. I will have a differentiated article later, but simple to say, margin is the area outside the border, and padding is the area inside the border, and when using margin / padding is also a basic thing that you developers Need to master (you can google to know more about the differences between them).

All is the past, let’s go back to the present:

The problem used to be annoying 1:

When layouting a web page, there will certainly be times when you increase or decrease the padding of an element, or add borders to make it more beautiful (according to a new designer design). The problem is that when you make these changes, the total width of the element will change and the layout will be moved because of those changes.

Example for ease of understanding:

Element (width) = 200px (content) + 40px (padding) = 240px When you increase the padding to 60px, the width of the element will increase to 260px, and will push things around to change the layout. To fix this, you have to reduce the width of the content to 180px, to make sure the total width is still 240px. If only the content itself scaled to make sure the total width was constant, how much better.

When you change padding, it will change the layout as shown below:

Changing padding changes the total layout

When you change the border, it will also change the layout as shown below:

Adding borders changes the overall layout

The problem used to be bothersome 2:

Another common layout error is the width of a child element that overflows from the parent

Layout errors are common when child elements spill over from a parent

Current solution

Box model upgraded (long time ago) with box-sizing , 2 main values ​​are: content-box and border-box

  • content-box : all elements are assigned by default as content-box , and are what I analyzed above. Note, the width and height attribute is to define the width / height of the content only.
  • border-box : the width and height properties will automatically include the content, padding and border, while the width of the content will automatically scale accordingly if we change the padding and the border, ensuring the size of both elements will be does not change, meaning that the total layout will not change.

And when box-sizing was born, “very rare” developers (personal views) wanted to go back to the past and use box-sizing with a value of content-box again except for special cases of the project. If you have any case, need to use content-box )

Formula based on box-sizing: border-box :

  • The width of an element = width = width content (auto) + padding left + padding to + border left + border must
  • The height of an element = height = height of content (auto) + padding on + padding under + border on + border under

box-sizing: border-box solves layout issues very well

The site has thousands of elements, is it possible to add the box-sizing attribute to each element?

Of course we won’t have to manually add each element, with the help of the Universal selector * , we only need a simple CSS line:

With the above code, all elements will be aligned to the border-box , and of course you can easily override for each specific element you want.

Note

In order not to make the article more complicated, I try to present the simplest and most typical case and skip some other details. For example, the width / height of an element is also affected by many other factors such as min-width , max-width , min-height , max-height , effects of flexbox …

Epilogue

Thank you for reading to the end of the article. Hopefully the article has added some knowledge about CSS Box model for you.

Box models are fairly basic content and are used almost every day by any frontend developer. So if you do not master it, take the time to learn more offline. If you have any feedback or suggestions for the article, please leave a comment below.

Keep researching the final part of this series:
Part 3: CSS Box Model – Ways of displaying elements with display properties

Share the news now

Source : Viblo