| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
In CSS, ‘box-sizing‘ is a property that defines how the width and height of an element are calculated. It can be set to either ‘content-box‘ or ‘border-box‘. Understanding the difference between these two values is crucial for designing layouts and ensuring that elements size correctly.
'content-box'
This is the default value for the ‘box-sizing‘ property. When ‘box-sizing‘ is set to ‘content-box‘, the width and height properties of an element include only the content, but not the padding, border, or margin. This means that any padding or border added to the element will increase its total size.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="content-box">Content Box</div>
</body>
</html>
In this example:
- The content area is 200px wide and 100px high.
- Padding adds 40px (20px on each side) to both the width and height.
- Border adds 20px (10px on each side) to both the width and height.
- The total size of the element becomes 260px wide and 140px high.
'border-box'
When ‘box-sizing‘ is set to ‘border-box‘, the width and height properties include the content, padding, and border, but not the margin. This means that padding and border will not increase the total size of the element; they are included within the specified width and height.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="border-box">Border Box</div>
</body>
</html>
In this example:
- The total width is 200px and the total height is 100px.
- Padding and border are included within these dimensions.
- The content area is reduced to 140px wide (200px – 20px padding on each side – 10px border on each side) and 60px high (100px – 20px padding on each side – 10px border on each side).
Comparison
The main difference between ‘content-box‘ and ‘border-box‘ lies in how the width and height of an element are calculated.
- ‘
content-box‘: Total size = content + padding + border - ‘
border-box‘: Total size = specified width/height (includes content, padding, and border)
Visual Comparison
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.content-box, .border-box {
display: inline-block;
margin: 10px;
color: white;
text-align: center;
line-height: 100px;
font-family: Arial, sans-serif;
}
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
background-color: lightblue;
}
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="content-box">Content Box</div>
<div class="border-box">Border Box</div>
</body>
</html>
Here, you can visually see how the’ content-box‘ element is larger because the padding and border add to its specified dimensions, whereas the ‘border-box‘ element remains the same size as specified, with padding and border included within those dimensions.
Usage
Using ‘border-box‘ can simplify the process of sizing elements, especially in responsive design and complex layouts, because it ensures that padding and borders do not affect the total width and height of elements. Many developers prefer to use ‘border-box‘ as a default by applying it globally:
*,
*::before,
*::after {
box-sizing: border-box;
}
This approach can prevent many sizing issues and make layout calculations more predictable.
