HTML | DOM Style boxSizing Property
The DOM Style boxSizing property is used to set or return how an object should be made to fit an element taking into consideration it’s padding, border and content.
This property can be useful when fitting elements into their desired position by automatically calculating their dimensions.
Syntax:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
- It returns the boxSizing Property:
object.style.boxSizing
- It is used to set the boxSizing Property:
object.style.boxSizing = "border-box | content-box | initial | inherit"
Return Values: It returns a string value, which represents the box-sizing property of an element.
Property Values:
- border-box: Using this value, any padding or border specified on the element is included and drawn inside the specified width and height. The dimensions of the content are calculated by subtracting the border and padding from the specified ‘width’ and ‘height’ properties of the element itself.
Example-1:
<!DOCTYPE html><html><head><title>DOM Style boxSizing Property</title><style>.container {width: 200px;height: 300px;border: 10px solid green;}.box {width: 200px;height: 100px;border: 5px solid lightgreen;text-align: center;font-size: 2rem;}</style></head><body><h1style="color: green">GeeksForGeeks</h1><b>DOM Style boxSizing Property</b><p>The container element has aheight of 500px and width of 200px.<br>The boxes inside have a heightof 100px and width of 200px.</p><divclass="container"><divclass="box"id="box-1">Geeks</div><divclass="box"id="box-2"style="padding: 10px;">For</div><divclass="box"id="box-3">Geeks</div></div><p>Click the button to set the boxSizingproperty of the three boxes toborder-box.</p><buttononclick="setBoxSizing()">Change boxSizing</button><script>function setBoxSizing() {document.getElementById("box-1").style.boxSizing ="border-box";document.getElementById("box-2").style.boxSizing ="border-box";document.getElementById("box-3").style.boxSizing ="border-box";}</script></body></html>Output:
Before clicking the button:
After clicking the button:
- content-box: Using this value, the specified width and height are applied to content-box of the element. Any padding and border specified on the element are added and drawn outside the specified dimensions of the box. This is the default value.
Example-2:
<!DOCTYPE html><html><head><title>DOM Style boxSizing Property</title><style>.container {width: 200px;height: 300px;border: 10px solid green;}.box {width: 200px;height: 100px;border: 5px solid lightgreen;text-align: center;font-size: 2rem;box-sizing: border-box;}</style></head><body><h1style="color: green">GeeksForGeeks</h1><b>DOM Style boxSizing Property</b><p>The container element has a heightof 500px and width of 200px.<br>The boxes inside have a heightof 100px and width of 200px.</p><divclass="container"><divclass="box"id="box-1">Geeks</div><divclass="box"id="box-2"style="padding: 10px;">For</div><divclass="box"id="box-3">Geeks</div></div><p>Click the button to set the boxSizingproperty of the three boxes tocontent-box.</p><buttononclick="setBoxSizing()">Change boxSizing</button><script>function setBoxSizing() {document.getElementById("box-1").style.boxSizing = "content-box";document.getElementById("box-2").style.boxSizing = "content-box";document.getElementById("box-3").style.boxSizing = "content-box";}</script></body></html>Output:
Before clicking the button:
After clicking the button:
- initial: This is used to set this property to its default value.
Example-3:
<!DOCTYPE html><html><head><title>DOM Style boxSizing Property</title><style>.container {width: 200px;height: 300px;border: 10px solid green;}.box {width: 200px;height: 100px;border: 5px solid lightgreen;text-align: center;font-size: 2rem;box-sizing: border-box;}</style></head><body><h1style="color: green">GeeksForGeeks</h1><b>DOM Style boxSizing Property</b><p>The container element has a heightof 500px and width of 200px.<br>The boxes inside have a heightof 100px and width of 200px.</p><divclass="container"><divclass="box"id="box-1">Geeks</div><divclass="box"id="box-2"style="padding: 10px;">For</div><divclass="box"id="box-3">Geeks</div></div><p>Click the button to set the boxSizingproperty of the three boxes to initial.</p><buttononclick="setBoxSizing()">Change boxSizing</button><script>function setBoxSizing() {document.getElementById("box-1").style.boxSizing = "initial";document.getElementById("box-2").style.boxSizing = "initial";document.getElementById("box-3").style.boxSizing = "initial";}</script></body></html>Output:
Before clicking the button:
After clicking the button:
- inherit: This inherits the property from its parent.
Example-4:
<!DOCTYPE html><html><head><title>DOM Style boxSizing Property</title><style>.container {width: 200px;height: 300px;border: 10px solid green;/* this acts as the parent */box-sizing: border-box;}.box {width: 200px;height: 100px;border: 5px solid lightgreen;text-align: center;font-size: 2rem;}</style></head><body><h1style="color: green">GeeksForGeeks</h1><b>DOM Style boxSizing Property</b><p>The container element has aheight of 500px and width of 200px.<br>The boxes inside have aheight of 100px and width of 200px.</p><divclass="container"><divclass="box"id="box-1">Geeks</div><divclass="box"id="box-2"style="padding: 10px;">For</div><divclass="box"id="box-3">Geeks</div></div><p>Click the button to set the boxSizingproperty of the three boxes to inherit.</p><buttononclick="setBoxSizing()">Change boxSizing</button><script>function setBoxSizing() {document.getElementById("box-1").style.boxSizing = "inherit";document.getElementById("box-2").style.boxSizing = "inherit";document.getElementById("box-3").style.boxSizing = "inherit";}</script></body></html>Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by boxSizing property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Apple Safari
