You are here: Reference > CSS > properties > box-sizing

box-sizing property

Browser support:
8
Specifies how the width and the height of the element are calculated. It affects the height and width properties.
Note: The box-sizing property is supported in Internet Explorer from version 8.
Use the -moz-box-sizing property in Firefox and the -webkit-box-sizing property in Google Chrome and Safari instead.
JavaScript page for this property: boxSizing. You can find other example(s) there.

Possible values:

 One of the following values: 
border-box
The height and width properties include the padding and the border but not the margin.
content-box
The height and width properties include only the content but not the margin, border and the padding.
inherit
Takes the value of this property from the computed style of the parent element.
margin-box
The height and width properties include everything (margin, border, padding, content).
padding-box
The height and width properties include the padding but not the margin and the border.
Default: content-box.

Example HTML code 1:

This example illustrates the use of the box-sizing, -moz-box-sizing and the -webkit-box-sizing properties:
<head>
    <style>
        .sizingContentBox {
            width: 200px;
            height: 70px;
            border: 5px solid #ffbc79;
            box-sizing: content-box;
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
        }
        .sizingBorderBox {
            width: 200px;
            height: 70px;
            border: 5px solid #ffbc79;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="sizingContentBox">
        Width and height do not contain the padding, border and margin.
    </div>
    <br />
    <div class="sizingBorderBox">
        Width and height contain the padding and the border but not the margin.
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content