CSS3 - Box Sizing
CSS3 - Box Sizing
For changing height and width of the element, the box sizing property is used. In CSS2, the box property can be changed by width+padding+border and height+padding+border attributes. But, CSS3 allows a separate attribute like box-sizing.
Example:
<html>
<head>
<style>
.div1 {
width: 250px;
height: 150px;
border: 2px solid green;
box-sizing: border-box;
}
.div2 {
width: 250px;
height: 150px;
padding: 75px;
border: 2px solid blue;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class = "div1">CSS3-box sizing property.</div><br />
<div class = "div2">CSS3-box sizing property with padding.</div>
</body>
</html>
Output:
