CSS | box-sizing Property

The box-sizing CSS property defines how the user should calculate the total width and height of an element i.e padding and borders, are to be included or not.

Syntax:

box-sizing: content-box|border-box;

Property Values:



  • content-box: This is the default value of box-sizing property. In this mode the width and height properties includes only the content. Border and padding are not included in it i.e if we set an element’s width to 200 pixels, then the element’s content box will be 200 pixels wide, and the width of any border or padding will be added to the final rendered width.
    Syntax:

    box-sizing: content-box;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>box-sizing Property</title>
            <style
                div {
                    width: 200px;
                    height: 60px;
                    padding: 20px;
                    border: 2px solid green;
                    background: green;
                    color: white;
                }
                .content-box { 
                    box-sizing: content-box; 
                }
            </style>
        </head>
        <body style = "text-align: center;">
            <h2>box-sizing: content-box</h2>
            <br>
            <div class="content-box">GeeksforGeeks</div>
        </body>
    </html>

    chevron_right

    
    

    Output:
    content-box

  • border-box: In this mode the width and height properties includes content, padding and borders i.e if we set an element’s width to 200 pixels, that 200 pixels will include any border or padding we added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

    Syntax:

    box-sizing: border-box;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>box-sizing Property</title>
            <style
                div {
                    width: 200px;
                    height: 60px;
                    padding: 20px;
                    border: 2px solid green;
                    background: green;
                    color: white;
                }
                .border-box { 
                    box-sizing: content-box; 
                }
            </style>
        </head>
        <body style = "text-align: center;">
            <h2>box-sizing: border-box</h2>
            <br>
            <div class="border-box">GeeksforGeeks</div>
        </body>
    </html>

    chevron_right

    
    

    Output:
    border-box

Supported Browsers: The browser supported by box-sizing property are listed below:

  • Google Chrome 10.0 4.0 -webkit-
  • Internet Explorer 8.0
  • Firefox 29.0 2.0 -moz-
  • Opera 9.5
  • Apple Safari 5.1 3.2 -webkit-


My Personal Notes arrow_drop_up


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.