CSS Box Sizing
The CSS box sizing property uses padding and border to calculate an element's total width and height.
CSS3 Box Sizing
The CSS box-sizing property allows us to select either border-box or content-box property while using width and height. Please keep in mind that the content-box is the default value of box-sizing.
Box Sizing Values:
border-boxcontent-box
Box Sizing: Content Box
This is the default value of box-sizing that uses border and padding during the calculation of the total width and height of the element.
Total width of the HTML element = content width +padding + border
Total height of the HTML element = content width +padding + border
Source Code
.box {
width: 100%;
padding: 20px;
border: 5px solid #f08080;
}
Box Sizing: border-box;
The border-box property of box-sizing does not increase the total width and height of the HTML element means total width will be same as the width set for the element but it shrink the content area space since shrinkage space is distributed among padding and border.
width of content Area = width - (padding + margin + border-width)
width - (padding + margin + border-width) + padding + margin + border-width = Total width
height - (padding + margin + border-width) + padding + margin + border-width = Total height
Source Code
.box {
width: 100%;
padding: 20px;
border: 5px solid #f08080;
box-sizing: border-box;
}
How To Use Box Sizing In Web Page Layout Design
Creating multi-column layout using the box-sizing property. In this case, you do not have to worry about the final size of the element's box while adding the padding and border on the element.
Here, creating the three-column layout and each column has equal width and lies side by side using the float property.
Source Code
.box {
width: 30%;
padding: 20px;
margin-left: 5%;
background: #f0e68c;
float: left;
box-sizing: border-box;
}
.box:first-child {
margin-left: 0;
}
Web Tutorials
