In order to access this site you need to enable JavaScript!

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>