How does the CSS Box-sizing Property control the size of HTML Elements ?
Last Updated :
06 Feb, 2024
The box-sizing property in CSS tells us how to figure out the complete width and height of an element. It decides whether to include things like padding and borders in that calculation or not.
Syntax
box-sizing: content-box;
box-sizing: inherit;
box-sizing: border-box;
Using content-box
The content box is the default setting for the box-sizing property. In this property, when you set the width and height of an element, those values only consider the content itself. Padding and borders are not counted within these dimensions. Use the box-sizing property to specify the box model. In this case, set it to content-box. This property ensures that the width specified in the next step includes only the content and not padding or border.
Example: Illustration of Box-sizing property control the size of HTML elements using content-box.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Content-box Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content-box-example">
<h2>content-box Example</h2>
<p>Content paragraph</p>
</div>
</body>
</html>
|
CSS
.content-box-example {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 20px;
background-color: #FFD700;
text-align: center;
font-family: Arial, sans-serif;
}
|
Output:
Using border-box
In the border-box property, when you set the width and height of an element, it includes the content, padding, and borders altogether. Use the box-sizing property to specify the box model. In this case, set it to border-box. Use width: 200px; to set the width of the element to 200 pixels.
Example: Illustration of Box-sizing property control the size of HTML elements using border-box.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Border-box Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="border-box-example">
<h2>border-box Example</h2>
<p>border paragraph.</p>
</div>
</body>
</html>
|
CSS
.border-box-example {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 20px;
background-color: #87CEEB;
text-align: center;
font-family: Arial, sans-serif;
}
|
Output:
Using inherit
The inherit value allows an element to borrow the box-sizing preference from its parent. Use the box-sizing property in the .parent class to set the box model to border-box. This property ensures that the specified width includes both the content and padding but not the border.
Example: Illustration of Box-sizing property control the size of HTML elements using inherit.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<title>Inherit Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<h2>Inherit Example</h2>
<div class="child">
<p>This element inherits the
box-sizing from its parent.
</p>
</div>
</div>
</body>
</html>
|
CSS
.parent {
box-sizing: border-box;
margin: 20px;
background-color: #98FB98;
text-align: center;
font-family: Arial, sans-serif;
}
.child {
box-sizing: inherit;
width: 200px;
padding: 20px;
border: 5px solid black;
background-color: #FFA07A;
}
|
Output:
Share your thoughts in the comments
Please Login to comment...