Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML | DOM Style boxSizing Property

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 08 Aug, 2022
Improve Article
Save Article

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:

  • 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:

1. 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: 

html




<!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>
    <h1 style="color: green">
      GeeksForGeeks
    </h1>
    <b>
      DOM Style boxSizing Property
    </b>
    <p>
      The container element has a
      height of 500px and width of 200px.
        <br>The boxes inside have a height
      of 100px and width of 200px.
    </p>
    <div class="container">
        <div class="box"
             id="box-1">
          Geeks
          </div>
        <div class="box"
             id="box-2"
             style="padding: 10px;">
          For
          </div>
        <div class="box"
             id="box-3">
          Geeks
          </div>
    </div>
 
    <p>
      Click the button to set the boxSizing
      property of the three boxes to
      border-box.
    </p>
    <button onclick="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:
 border-box-before 
After clicking the button: 
border-box-after
2. 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: 
html



<!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>
    <h1 style="color: green">
      GeeksForGeeks
    </h1>
    <b>
      DOM Style boxSizing Property
    </b>
    <p>
      The container element has a height
      of 500px and width of 200px.
        <br>The boxes inside have a height
      of 100px and width of 200px.
    </p>
    <div class="container">
        <div class="box"
             id="box-1">
          Geeks
          </div>
        <div class="box"
             id="box-2"
             style="padding: 10px;">
          For
          </div>
        <div class="box"
             id="box-3">
          Geeks
          </div>
    </div>
 
    <p>
      Click the button to set the boxSizing
      property of the three boxes to
      content-box.
    </p>
 
    <button onclick="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: 
content-box-before 
After clicking the button: 
content-box-after
3. initial: This is used to set this property to its default value. 
Example-3: 
html



<!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>
    <h1 style="color: green">
      GeeksForGeeks
    </h1>
    <b>
      DOM Style boxSizing Property
    </b>
    <p>
      The container element has a height
      of 500px and width of 200px.
        <br>The boxes inside have a height
      of 100px and width of 200px.
    </p>
    <div class="container">
        <div class="box"
             id="box-1">
          Geeks
          </div>
        <div class="box"
             id="box-2"
             style="padding: 10px;">
          For
          </div>
        <div class="box"
             id="box-3">
          Geeks
          </div>
    </div>
 
    <p>
      Click the button to set the boxSizing
      property of the three boxes to initial.
    </p>
    <button onclick="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: 
initial-before 
After clicking the button: 
initial-after
4. inherit: This inherits the property from its parent. 
Example-4: 
html



<!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>
    <h1 style="color: green">
      GeeksForGeeks
    </h1>
    <b>
      DOM Style boxSizing Property
    </b>
    <p>
      The container element has a
      height of 500px and width of 200px.
        <br>The boxes inside have a
      height of 100px and width of 200px.
    </p>
    <div class="container">
        <div class="box"
             id="box-1">
          Geeks
          </div>
        <div class="box"
             id="box-2"
             style="padding: 10px;">
          For
          </div>
        <div class="box"
             id="box-3">
          Geeks
          </div>
    </div>
    <p>
      Click the button to set the boxSizing
      property of the three boxes to inherit.
    </p>
    <button onclick="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:
 inherit-before 
After clicking the button: 
inherit-after
Supported Browsers: The browser supported by boxSizing property are listed below:
  • Google Chrome 10 and above
  • Edge 12 and above
  • Internet Explorer 8 and above
  • Firefox 29 and above
  • Opera 7 and above
  • Apple Safari 5.1 and above

My Personal Notes
arrow_drop_up
Previous
HTML <a> href Attribute
Next

HTML | DOM Video playbackRate Property
Related Articles
1.
HTML | DOM Style backgroundClip Property
2.
HTML | DOM Style borderTop Property
3.
HTML | DOM Style columnGap Property
4.
HTML | DOM Style borderImageSource Property
5.
HTML | DOM Style wordBreak Property
6.
HTML | DOM Style pageBreakBefore Property
7.
HTML | DOM Style borderImageOutset Property
8.
HTML | DOM Style maxHeight Property
9.
HTML | DOM Style columnRuleWidth Property
10.
HTML | DOM Style transitionTimingFunction property
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
sayantanm19
@sayantanm19
Vote for difficulty
Current difficulty :
Basic





Improved By :
Article Tags :
Practice Tags :
Report Issue
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!