HTML - DOM Style Object boxSizing Property

Quiz

HTML DOM Style Object boxSizing property specifies the way an element's total width and height is calculated.

Syntax

Set the boxSizing property:

object.style.boxSizing= "border-box | content-box | initial | inherit";

Get the boxSizing property:

object.style.boxSizing;

Property Values

Value	Description
border-box	In border-box the width specified stays intact and any padding or border specified on the element is included and drawn inside the specified width and height. The height and width of content are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties.
content-box	It is the default value and the specified width and height applied to the width and height respectively of the content box of the element. Any padding or border width will be added to the content box final width.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents box sizing property of an element.

Examples of HTML DOM Style Object 'boxSizing' Property

The following examples illuatrates implementation of box sizing property on div element.

Add 'border-box' Property to Element

This example illustrates use of border-box property.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .parent {
            width: 400px;
            border: 2px solid;
        }
        .child {
            width: 200px;
            border: 4px solid #04af2f;
            float: left;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child" id="child1">BOX 1.</div>
        <div class="child" id="child2">Box 2.</div>
        <div class="child" id="child3">Box 3.</div>
        <div style="clear:both;"></div>
    </div>
    <button onclick="myFunction()">Try it</button>
    <script>
        function myFunction() {
            document.getElementById("child1")
                .style.boxSizing = "border-box";
            document.getElementById("child2")
                .style.boxSizing = "border-box";
            document.getElementById("child3")
                .style.boxSizing = "border-box";                
        }
    </script>
</body>
</html>

Add 'content-box' Property to Element

This example illustrates use of content-box property.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .parent {
            width: 400px;
            height: 450px;
            border: 2px solid;
        }
        .child {
            width: 200px;
            height: 100px;
            border: 4px solid #04af2f;
            float: left;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child" id="child1">BOX 1.</div>
        <div class="child" id="child2">Box 2.</div>
        <div class="child" id="child3">Box 3.</div>
        <div style="clear:both;"></div>
    </div>
    <button onclick="myFunction()">Try it</button>
    <script>
        function myFunction() {
            document.getElementById("child1")
                .style.boxSizing = "content-box";
            document.getElementById("child2")
                .style.boxSizing = "content-box";
            document.getElementById("child3")
                .style.boxSizing = "content-box";                
        }
    </script>
</body>
</html>

Supported Browsers

Property
boxSizing	Yes 10	Yes 12	Yes 29	Yes 5.1	Yes 7

html_dom.htm

Print Page