The box-sizing property in CSS allows you to control how the total width and height of an element are calculated, taking into account its content, padding, and border. It influences the way the CSS box model is interpreted, affecting the element's layout and sizing.
There are two main values for the box-sizing property:
content-box (Default): This is the default behavior. The total width and height of an element are calculated by adding the content width and height to the padding and border, but not including the margins.
border-box: With this value, the total width and height of an element are calculated by including the content width and height along with the padding and border. The margins are still not included in the total width and height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Box Sizing</title>
</head>
<body>
<div class="box">
<h2>Welcome to JTC</h2>
<p>This is the content</p>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h2, p{
font-family: Arial, Helvetica, sans-serif;
color: black;
}
.box{
width: 200px;
padding: 20px;
border: 2px solid black;
box-sizing: content-box;
}
In this example, the width of the div element would be calculated as follows:
Content width + (2 * Padding) + (2 * Border) = 200px + 40px + 4px = 244px
Example using border-box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Box Sizing</title>
</head>
<body>
<div class="box">
<h2>Welcome to JTC</h2>
<p>This is the content</p>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h2, p{
font-family: Arial, Helvetica, sans-serif;
color: black;
}
.box{
width: 200px;
padding: 20px;
border: 2px solid black;
box-sizing: border-box;
}
Benefits of box-sizing: border-box:
• It simplifies layout calculations as the total width and height are more predictable.
• Padding and border widths are included in the specified width, making it easier to create consistent layouts
Note:
• The box-sizing property affects only the specified element and its descendants, not other elements on the page.
• It's important to set box-sizing consistently across your stylesheets to maintain a consistent layout.