The CSS box-sizing property is fundamental for creating predictable and consistent layouts. It defines how the total width and height of an element are calculated, preventing common layout issues.
Example 1: Default Behavior (content-box)
.content-box {
/* The default value, where width and height apply only to the content area */
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}
Explanation
With content-box, the actual width of this element is 250px (200px width + 40px padding + 10px border). This can make sizing elements tricky as you have to account for padding and border separately.
Example 2: Two Adjacent content-box Elements
.parent {
width: 400px;
}
.child {
/* Each child's calculated width is 202px (200px + 2px border) */
box-sizing: content-box;
width: 200px;
border: 1px solid red;
float: left;
}
Explanation
Two of these .child elements will not fit side-by-side inside the 400px .parent because their rendered width is 202px each, totaling 404px. This demonstrates a common layout challenge with the default box-sizing value.
Example 3: Border-box for Predictable Sizing
.border-box {
/* Padding and border are included in the element's total width and height */
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid blue;
}
Explanation
Using border-box, the total width of this element is exactly 200px. The padding and border are subtracted from the content area, making the layout far more intuitive and manageable.
Example 4: Two Adjacent border-box Elements
.parent {
width: 400px;
}
.child {
/* Each child's calculated width is exactly 200px */
box-sizing: border-box;
width: 200px;
border: 1px solid green;
float: left;
}
Explanation
Here, two .child elements fit perfectly within the 400px .parent container. Their total width remains 200px each because the border is included within that specified width.
Example 5: Universal Border-box Application
/* A common and highly recommended practice */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Explanation
This code snippet applies border-box to every element on the page. This modern CSS reset ensures a consistent box model throughout your entire project, preventing unexpected sizing issues.
Example 6: Responsive Grids with border-box
.grid-container {
display: flex;
}
.grid-item {
/* Flex items with padding and border maintain their percentage-based width */
box-sizing: border-box;
flex: 0 0 50%; /* Each item takes up 50% of the container's width */
padding: 15px;
border: 2px solid purple;
}
Explanation
When creating responsive grids, border-box is essential. It allows you to set percentage-based widths for grid items while also adding padding and borders without breaking the layout.
Example 7: Input Element Sizing
input[type="text"] {
/* Ensures the input field's width is exactly as specified */
box-sizing: border-box;
width: 100%;
padding: 10px;
}
Explanation
Form elements often have default padding and borders that can cause them to exceed their container's width. Applying border-box ensures the input field, including its padding, respects the width: 100% declaration.