CSS box-sizing Property
The box-sizing property defines the calculation of the width and height of an element if they include padding and borders.
The box-sizing property is one of the CSS3 properties.
The width and height of an element, by default, is calculated like this:
- width + padding + border = actual width of an element
- height + padding + border = actual height of an element
So, when the width and height of an element are defined, the element often appears bigger than it was set (because the element's border and padding are added to the element's specified width and height).
| Initial Value | content-box |
| Applies to | All elements that accept width and height. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.boxSizing = "border-box"; |
Syntax¶
box-sizing: content-box | border-box | initial | inherit;In this example there are shown two <div> elements with the same specified width and height:
Example of the box-sizing property:¶
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
box-sizing: content-box;
width: 400px;
height: 50px;
padding: 50px;
border: 5px double #1c87c9;
}
.div2 {
box-sizing: border-box;
width: 400px;
height: 50px;
padding: 50px;
border: 5px dashed #8ebf42;
}
</style>
</head>
<body>
<h2>Box-sizing Example</h2>
<hr />
<h3>box-sizing: content-box (default):</h3>
<div class="div1">The width for this div is set as 400px. Thus, the full width is 400px + 10px (left and right border) + 100px (left and right padding) = 510px.</div>
<br>
<h3>box-sizing: border-box:</h3>
<div class="div2">The width and height apply to all parts of the div element: The full width is 400px.</div>
</body>
</html>The box-sizing and border-box properties are used for layouting elements. This method is useful because it makes working with the elements’ sizes easier by eliminating the number of pitfalls that can be stumbled on when you are laying out the content.
Example of using the box-sizing property to create two bordered boxes defined side by side:¶
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 2px double #1c87c9;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 3px solid #ccc;
float: left;
padding: 3px;
}
</style>
</head>
<body>
<h2>Box-sizing Example</h2>
<p>Here you can see two bordered boxes defined side by side.</p>
<div class="container">
<div class="box">Left part</div>
<div class="box">Right part</div>
<div style="clear:both;"></div>
</div>
</body>
</html>Values¶
| Value | Description |
|---|---|
| content-box | The width and height properties include the content, but the padding, border, or margin aren't included. It is the default value. |
| border-box | The width and height properties include the content, padding, and border, but do not include the margin. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
0 Comments
CAN FEEDBACK
Emoji