Javascript Reference - HTML DOM Style boxSizing Property

The boxSizing property gets and sets how to fit elements to an area.

Browser Support


`boxSizing`	Yes	Yes	Yes (MozBoxSizing)	Yes	Yes

Syntax

Return the boxSizing property:

var v = object.style.boxSizing

Set the boxSizing property:

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

Property Values

content-box: Default. The width and height properties( and min-width,height/max-width, height properties) include only the content. Border, padding, or margin are not included
border-box: The width and height properties( and min-width, height/max-width, height properties ) include content, padding and border, but not the margin.
initial: sets to default value
inherit: Inherits this property from its parent element

Technical Details

Default Value:	content-box
Return Value:	A tring representing the box-sizing property
CSS Version	CSS3

Example

The following code shows how to change the box-sizing property.


<!DOCTYPE html>
<html>
<head>
<style> 
div.container {<!--from  ww  w. ja va 2 s.  c om-->
    width: 300px;
    border: 1px solid;
}

div.box {
    width: 150px;
    border: 3px solid coral;
    float: left;
    padding: 10px;
}
</style>
</head>
<body>

<div class="container">
    <div class="box" id="box1">This is BOX1.</div>
    <div class="box" id="box2">This is BOX2.</div>
    <div style="clear:both;"></div>
</div>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("box1").style.MozBoxSizing = "border-box"; /* Code for Firefox */
    document.getElementById("box2").style.MozBoxSizing = "border-box"; /* Code for Firefox */
    document.getElementById("box1").style.boxSizing = "border-box";
    document.getElementById("box2").style.boxSizing = "border-box";
}
</script>

</body>
</html>

The code above is rendered as follows: