CSS box-sizing Property - GeeksforGeeks

21 Oct, 2021
The box-sizing property in CSS 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: All the properties are described well with the example below.
content-box: This is the default value of the box-sizing property. In this mode, the width and height properties include 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: This example illustrates the use of the box-sizing property whose value is set to content-box.
HTML
<!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>
Output:
border-box: In this mode, the width and height properties include 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: This example illustrates the use of the box-sizing property whose value is set to border-box.
HTML
<!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>
Output:
Supported Browsers: The browser supported by the box-sizing property are listed below:  
Google Chrome 10.0 4.0 -webkit-
Internet Explorer 8.0
Microsoft Edge 12.0
Firefox 29.0 2.0 -moz-
Opera 9.5
Apple Safari 5.1 3.2 -webkit-
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
hritikbhatnagar2182
bhaskargeeksforgeeks
CSS-Properties
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property