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

How to use CSS box-sizing?

The CSS box-sizing property is a very 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 actually do? It sets the default CSS box model used. If set to border-box then the width and height of an element will include its borders and padding; if set to content-box then only the content (the stuff inside) will be included in those measurements.

CSS box-sizing is a CSS property that can be applied to any element in order to change the way its size and position are calculated. It’s most commonly used on elements 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.
This is an important thing for any web designer to learn because understanding box-sizing will help keep your layouts consistent across browsers.

The CSS Box-Sizing is used for including 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 we want to put a border on it the bottom scroll bar appears much time, and that is a common issue of new beginners and sometimes for UI designers too. 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.


<style>
#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}
</style>

<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 major differences in both examples. 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 very useful.

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 u did not change your width but u get a 150px box. this 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 just 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, u don’t need the 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.

*{box-sizing:border-box}
box-sizing | box sizing

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 u are clear on the box model. and also box-size. if you have any query related to CSS properties. leave a comment below. I will try to explain that property, and also tell me what CSS shape u want to create. if you are facing any problem in creating any shape. comment below your shape will be there in some time.

Thank for read the article please leave your valuable comment bellow. How was your experience.

for more tutorial and more shapes click here

Leave a Comment