CSS Box-Sizing How to use border-box: Best CSS tricks

The CSS box-sizing property is a handy way to ensure that you always have the correct size for your boxes, but how do you use it?

First off, what does this property do? It sets the default CSS box model used. If set to a border-box, then the width and height of an element will include its borders and padding; if set to content-box, only the content will be retained (the stuff inside) in those measurements.
CSS box-sizing is a CSS property that can apply to any element to change its size and position calculation. It’s most commonly used on pieces with children, as it ensures that they never appear outside of their parent container – no matter how many nested elements there are.
If you’re a web designer, chances are you heard of the CSS box-sizing property. But do you know what it does?

In this article, we’ll explore how to use and understand the CSS box-sizing property.
Any web designer needs to learn because understanding box-sizing will help keep your layouts consistent across browsers.

The Box-Sizing css property

The CSS Box-Sizing use includes padding and border of an HTML element without disturbing the width and height of an HTML element. If we have a box of 100% width and want to put a border on it, the bottom scroll bar appears much time, which is a common issue for new beginners and sometimes for UI designers. If we face the bottom scrollbar problem, we simply put the code into our CSS.

You can try the below code in your CSS for the best result.

#Box{width:100%; border:5px solid red; padding:20px; box-sizing:unset !important}

#Box1{width:300px; border:5px solid blue; padding:20px; box-sizing:border-box}

<div id="Box"></div>
<div id="Box1"></div>

In the above examples, we set box-sizing: unset for remove default box-sizing, and in example 2, we set box-sizing: border-box. And we saw there are significant differences in both instances. In one example, we get the first box above 100%, and in another example, there is 100% box size. So now we understood that if we want a box with padding or border, we need the box-sizing property. The box-sizing property is beneficial.

This property also helps the inbox model. the box model is affected by padding and height width. So we need to add this for a perfect size box. for better understanding, we tried to explain one more example. Let create a 100px box, don’t add padding or border. Add background color for div’s visibility. Now open your inspect window and move the cursor on that particular div. You see, your box size is perfect.

Now add a 20px padding to your div. and also add a 5px border on it. now do the same as we did before, open your inspection window, and check that box size. this time the box size is 150px. here you did not change your width, but you get a 150px box. It is a major issue in CSS.

What is the solution to the above problem?

The solution is the above problem is. There are two types of solutions available in CSS. the first one is the calc() method. And another is box-sizing.

  • The calc() method: in this method, we need to calculate the box size. you need the pass the value in the calc method and less by border and padding. like if your box’s width is 100px and border is 5px and padding is 20px. add border and padding-left and padding-right. Then less from the width.
width : calc(100px - 40px - 10px)
  • The box-size property: in this method, you don’t need a complex calculation. We just need to put the box-size property in universal selector *{box-size:border-box} and we get the perfect size box. now we can check both box model methods by using inspect window. both div’s width is 100px.

So whenever you start a new project, add a box-sizing property in the universal selector. That universal selector allows the borders and the padding in the existing width of the box. It also helps with the box model concept.

That is the only property that provides us a perfect size box. I hope now you are clear on the box model. and also the box size. Suppose you have any query related to CSS properties. Leave a comment below. I will try to explain that property and tell me what CSS shape you want to create if you face any problem in making any shape. Comment below; your shape will be there in some time.

Thank you for reading the article; please leave your valuable comment below. How was your experience?

Also Read: CSS Grid vs Flexbox: Which is Better?

Follow us on Facebook

Leave a Comment