CSS box-sizing
Understanding DimensionsIn this lesson, we will learn about the CSS box-sizing property and why it is considered important for responsive layout designing.
CSS box-sizing Property
The CSS box-sizing property is used to control how the total width and height of an HTML element are calculated, especially when you apply padding and borders to the element.
The box-sizing property has two possible values:
- content-box
- border-box
content-box
The default value of the box-sizing property of an element is the content-box. This value specifies that the width and height of an element are calculated based only on the content of the element.
When you add padding or borders to an element, it increases the overall width and height of the element, causing the element to expand beyond what you might expect.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS box-sizing Example</title>
<!-- Internal CSS -->
<style>
div {
width: 200px;
height: 150px;
padding: 20px;
border: 5px solid red;
}
</style>
</head>
<body>
<div>
<p>Set padding and borders to all the four sides</p>
</div>
</body>
</html>In the above example, the total width of the div will be 250px (200px content width + 20px padding on the left + 20px padding on the right + 5px left border + 5px right border) and the total height of the div will be 200px (150px content height + 20px padding on the top + 20px padding on the bottom + 5px top border + 5px bottom border).
Note: The box-sizing: content-box; can be useful when you need fine-grained control over the sizing of elements, and you want to explicitly calculate the total size, including padding and borders.
border-box
When you set the box-sizing property to border-box, the width and height of an element include the content, padding, and borders. In other words, the padding and borders are included within the specified width and height of the element.
This value makes it easier to create elements with specific dimensions without having to calculate the impact of padding and borders separately.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS box-sizing Example</title>
<!-- Internal CSS -->
<style>
div {
width: 200px;
height: 150px;
padding: 20px;
border: 5px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<p>Set padding and borders to all the four sides</p>
</div>
</body>
</html>In the above example, the total width of the div will be 200px, and the total height will be 150px. The box-sizing: border-box; property ensures that the padding and borders are included within the specified dimensions.
Note: The box-sizing: border-box; is often preferred when designing layouts because it simplifies the process of creating elements with precise dimensions. This is especially useful in responsive web design.
