In this article we will learn about to use of the box-sizing property in CSS, The box-sizing property defines how the width and height of an element should be visible to the user i.e. border and padding are to be included or not.
Syntax:
box-sizing: content-box|border-box;
Property Values:
- content-box (default value)
- border-box: It tells the browser that the values specified for an element’s width and height will include content, padding, and borders. This typically makes it much easier to size elements. The box-sizing: border-box is the default styling that browsers use for the <table>, <select>, and <button> elements. For example – If you set an element’s width to 200 and height to 100 pixels, that 200 and 100 pixels will include any border or padding that you have added and the content box will shrink to absorb that extra width and height.
Syntax:
box-sizing: border-box;
Dimensions of the element are calculated as:
width = border + padding + width of the content height = border + padding + height of the content
Example: In this example, we using the above-explained method.
HTML
<!DOCTYPE html><html>
<head>
<title>box-sizing Property</title>
<style>
div {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid orange;
background: green;
color: white;
display: inline-block
}
.box {
box-sizing: border-box;
}
</style>
</head>
<body style="text-align:center;">
<h2>{box-sizing: border-box;}</h2>
<br>
<div class="box">GeeksforGeeks</div>
</body>
</html>
|
Output:
The following figure illustrates the {box-sizing: border-box:} for the above example.
Browser Support: The browser that fully supports 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-