The CSS3
box-sizing property allows us to include the padding and border in an element's total width and height.
Without the CSS3 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
height + padding + border = actual height of an element
This means: When you set the width/height of an element, the element often appear 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:
This div is smaller (width is 300px and height is 100px).
This div is bigger (width is also 300px and height is 100px).
The two <div> elements above end up with different sizes in the result (because div2 has a padding specified):
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>
</body>
</html>
No comments:
Write comments