CSS Box Model
Box model is one of the critical parts of CSS rendering model but the answer related to is very shallow and described as if it were not important.
Following four aspects that made up the box mode:
When we say that an element should have a width of 100%, what does that actually mean? actually the browsers interpret it slightly differently than you do. Let's get our hands dirty to write some code.
<style
section {
width: 200px;
}
.box {
width: 100%;
padding: 10px;
border: 2px solid;
}
</style>
<section>
<div class="box"></div>
</section>>
We have set width:100% to our box container. It means the box content size should be equal to the available space, in this scenario it is 200px. The padding and border added on top. So, Our box container's total width is now 224px because it's adding 10px and 2px of border to each side: 200+10*2+2*2.
The same thing happens with height. In our example the content is empty that means content size is 0px but the padding and border added on the top. 0+10*2+2*2.
The behavior's is quite surprising and it sometimes breaks the UI, generally not what we want as developers. Thankfully, box-sizing CSS property rescues us from this surprising behavior. It allows us to change the size calculations. The default is content-box it accounts only for inner content but it offers another value border-box.
With box-sizing: border-box, things behave exactly as we expect. It allows us to include padding and border in an element's total width and height. That means that increasing the padding and border will decrease the size available for the element's content.
Instead of applying it to every layout element we can set it as default values for all elements using the following code snippet.
*,
*::before,
*::after {
box-sizing: border-box;
}
The best way to add it in your global styles sheet. It helps you a lot I guarantee!! 😃