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

You are here: Reference > JavaScript > client-side > style handling > properties > boxSizing

boxSizing style property

Browser support:

8

Specifies or retrieves how the width and the height of the element are calculated. It affects the height and width properties.

Note: The boxSizing property is supported in Internet Explorer from version 8.

Use the MozBoxSizing property in Firefox and the webkitBoxSizing property in Google Chrome and Safari instead.

Syntax:

object.boxSizing;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: box-sizing

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the boxSizing, MozBoxSizing and webkitBoxSizing properties in JavaScript:

<head>
    <style>
        .example {
            padding: 30px;
            border: 15px solid red;
            width: 250px;
            height: 50px;
            box-sizing: content-box;
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
        }
    </style>

    <script type="text/javascript">
        function ChangeBoxSizing (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var boxSizing = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");
            if ('boxSizing' in div.style) {
                div.style.boxSizing = boxSizing;
            } else if ('MozBoxSizing' in div.style) {
                div.style.MozBoxSizing = boxSizing;
            } else if ('webkitBoxSizing' in div.style) {
                div.style.webkitBoxSizing = boxSizing;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div class="example" id="myDiv">
        Division with box-sizing: content-box
    </div>

    <select onchange="ChangeBoxSizing (this);" size="5">
        <option selected="selected" />content-box
        <option />padding-box
        <option />border-box
        <option />margin-box
        <option />inherit
    </select>
</body>