CSS Boxing Sizing
CSS Boxing Sizing
The CSS box-sizing property allows us to include the padding and border in an element's total width and height. Without the CSS box-sizing Property By default, the width and height of an element is calculated like this:
width + padding + border = actual width of an element height + padding + border = actual height of an element
This means: When you set the width/height of an element, the element often appears bigger than you have set (because the element's border and padding are added to the element's specified width/height).
The following illustration shows two div elements with the same specified width and height:
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 200px;
height: 120px;
}
.box1 {
border: 1px dashed blue;
}
.box2 {
padding: 50px;
border: 1px dashed red;
}
</style>
</head>
<body>
<h1>Content Without box-sizing</h1>
<div class="box1">This div is smaller </div>
<br>
<div class="box2">This div is bigger with padding</div>
</body>
</html>
The box-sizing property solves this problem.
With the CSS box-sizing Property
The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height:
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 300px;
height: 100px;
box-sizing: border-box;
}
.div1 {
border: 1px solid blue;
}
.div2 {
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Content With box-sizing</h1>
<div class="div1">Box sizing keep the element in
his actual dimension</div>
<br>
<div class="div2">Box sizing keep the element in his actual
dimension irrespective of the padding</div>
</body>
</html>
The result of using the box-sizing: border-box; is so much better, every developer is adviced to use it for all elements on their pages to work this way.
The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;).
Applying this to all elements is safe and wise:
Example * { box-sizing: border-box; }
