CSS box-sizing Property
The CSS box-sizing property determines how the total width and height of an element are calculated. By default, it uses content-box, which includes only the content’s dimensions, while border-box includes padding and border. This property simplifies layout design and element sizing.
Syntax:
box-sizing: content-box|border-box;
Property Values: All the properties are described well in the example below.
content-box
The content-box value for box-sizing calculates an element’s width and height, excluding padding and borders, which are added to the specified dimensions.
Syntax:
box-sizing: content-box;
Example: This example illustrates the use of the box-sizing property whose value is set to content-box.
<!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">w3wiki</div>
</body>
</html>
Output:
border-box
The border-box value for box-sizing calculates an element’s width and height, including padding and borders within the specified dimensions, making layout design more straightforward and predictable.
Syntax:
box-sizing: border-box;
Example: This example illustrates the use of the box-sizing property whose value is set to border-box.
<!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: border-box;
}
</style>
</head>
<body style="text-align: center;">
<h2>box-sizing: border-box</h2>
<br>
<div class="border-box">w3wiki</div>
</body>
</html>
Output:
Supported Browsers: The browser supported by the box-sizing property are listed below:
Contact Us