Photo by Frames For Your Heart on Unsplash
Why and How to Use Box-Sizing: 'Border-Box' in Your CSS Layouts
Understanding the box-sizing Attribute in CSS: Keeping Your Layouts in Order
When working with CSS, one of the most crucial yet often misunderstood properties is box-sizing. This property plays a significant role in how elements are sized and can make the difference between a layout that behaves as expected and one that doesn't. In this article, we'll dive deep into the box-sizing attribute, understand its variations, and explore why it is essential for creating consistent and predictable layouts.
What is box-sizing?
The box-sizing property allows us to control how the width and height of an element are calculated. By default, CSS uses the content-box value for box-sizing, which means the width and height you set for an element only include the content area, excluding padding and border. However, this default behaviour can often lead to unexpected results, especially when adding padding and borders.
Variations of box-sizing
There are two primary values for the box-sizing property:
content-box(default): The width and height properties include only the content. Padding and border are added outside of the content area, increasing the total size of the element unexpectedly.border-box: The width and height properties include the content, padding, and border. This means the total size of the element is constrained to the specified width and height, regardless of padding or border.
Let's explore how these variations work with some practical examples.
Example: content-box vs. border-box
Consider the following HTML and CSS:
<div class="content-box">Content Box</div>
<div class="border-box">Border Box</div>
div {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid #333;
margin: 10px;
}
.content-box {
box-sizing: content-box; //the default
background-color: lightblue;
}
.border-box {
box-sizing: border-box;
background-color: lightcoral;
}
Results
When using content-box, the actual rendered size of the .content-box element is:
Width: 200px (content) + 40px (padding) + 20px (border) = 260px
Height: 100px (content) + 40px (padding) + 20px (border) = 160px
In contrast, when using border-box, the .border-box element's total size remains exactly 200px by 100px because the padding and border are included in the specified dimensions.
Why is box-sizing Important?
Predictable Layouts: By using
box-sizing: border-box, you ensure that the dimensions you set are the dimensions you get. This predictability is crucial when creating complex layouts, especially in responsive design where elements must fit perfectly within their containers.Simplified Calculations: With
border-box, you don't have to calculate and adjust for padding and border manually, simplifying the process of setting element sizes.Consistency Across Elements: Applying
box-sizing: border-boxglobally ensures a consistent box model throughout your project, reducing the chances of layout inconsistencies and bugs.
Practical Example: Global box-sizing
A common best practice is to apply box-sizing: border-box to all elements using a universal selector:
*, *::before, *::after {
box-sizing: border-box;
}
This rule ensures that all elements, including pseudo-elements, adhere to the border-box model, providing a solid foundation for your layouts.
Maintaining Dimensions with Borders
Consider the following example where we have a simple circle without any box-sizing applied:
htmlCopy code<body>
<div class='a'></div>
<body>
<style>
body {
background: pink;
display: flex;
align-items: center;
justify-content: center;
}
.a {
background: black;
height: 100px;
width: 100px;
border-radius: 100%;
}
</style>
Result:
Here, no box-sizing is needed as no additional elements like borders or padding affect its 100px width and height.
Now, let's say you want to add a border to the circle while still maintaining its dimensions:
htmlCopy code<body>
<div class='a'></div>
<body>
<style>
body {
background: pink;
display: flex;
align-items: center;
justify-content: center;
}
.a {
background: black;
height: 100px;
width: 100px;
border-radius: 100%;
border: 30px solid purple;
}
</style>
Result:
Simply adding the border increases the width and height by 60px each (30px border on all sides). To maintain the original dimensions, you could reduce the width and height by 60px, but using box-sizing: border-box allows you to avoid manual calculations:
<body>
<div class='a'></div>
<body>
<style>
body {
background: pink;
display: flex;
align-items: center;
justify-content: center;
}
.a {
background: black;
height: 100px;
width: 100px;
border-radius: 100%;
border: 30px solid purple;
box-sizing: border-box; //simply add this
}
</style>
Result:
Adding the box-sizing: border-box attribute helps you maintain the circle's dimensions while achieving your design goals.
Creative Uses of box-sizing
Beyond maintaining consistent layouts, box-sizing can be creatively used to achieve specific design effects. For example, when creating a button with equal padding inside, using border-box ensures that adding borders or increasing padding does not affect the overall size of the button, preserving the design integrity.
.button {
padding: 10px 20px;
border: 2px solid #000;
background-color: #f0f0f0;
box-sizing: border-box;
}
Here, the button's size remains consistent, regardless of any changes to padding or border, making it easier to maintain uniformity across different buttons.
Conclusion
Understanding and effectively using the box-sizing property is vital for any CSS developer aiming to create reliable and maintainable layouts. By adopting box-sizing: border-box, you can simplify your CSS, avoid common pitfalls, and ensure that your designs are consistent across different elements and screen sizes. Embrace the power of box-sizing to keep your layouts in perfect order and elevate your CSS skills to the next level.
See you on the next one!