CSS Property box-sizing
The box-sizing property controls how
the browser handles the sizing properties, or how to calculate
width and height of an element.
The box-sizing CSS property sets
how the "box model" is handled.
For example, we have
.element {
width: 100px;
padding: 20px;
border: 5px solid black;
}
The resulting box is 150px wide. if the box-sizing model is content-box.
We can change the box-sizing property to padding-box
where the box would be 110px wide with 20px of padding on the inside,
or border-box where the box would
be 100px wide with 10px of border and 20px of padding on the inside.
Summary
- Initial value
- content-box
- Inherited
- no
- CSS Version
- CSS3
- JavaScript syntax
- object.style.boxSizing="border-box"
- Animatable
- no
CSS Syntax
box-sizing: content-box|border-box|initial|inherit;
Property Values
- content-box
- Default. The width and height properties( and min-width,height/max-width, height properties) include only the content. Border, padding, or margin are not included
- border-box
- The width and height properties( and min-width, height/max-width, height properties ) include content, padding and border, but not the margin.
- initial
- sets to default value
- inherit
- Inherits this property from its parent element
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
box-sizing |
Yes | 8.0 | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<head>
<style>
div.container {<!-- ww w. j a v a 2s.co m-->
width: 30em;
border: 1em solid;
}
div.box {
box-sizing: border-box;
width: 40%;
border: 1em solid blue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">This div occupies the left half.</div>
<div class="box">This div occupies the right half.</div>
<div style="clear:both;"></div>
</div>
</body>
</html>