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:

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

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

    Before clicking the button:
    border-box-before

    After clicking the button:
    border-box-after

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    Before clicking the button:
    content-box-before

    After clicking the button:
    content-box-after

  • initial: This is used to set this property to its default value.

    Example-3:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    Before clicking the button:
    initial-before

    After clicking the button:
    initial-after

  • inherit: This inherits the property from its parent.

    Example-4:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari


My Personal Notes arrow_drop_up

Maybe this silence is dangerous

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.