The CSS content-box is the default value for the box-sizing property. When an element's width and height are set, the sizing only applies to the content area itself. Any padding and border are added on top of the specified dimensions, making the final rendered element larger. This model requires careful calculation to manage element layouts effectively.
Example 1: Basic Content Box
.content-box-element {
box-sizing: content-box; /* This is the default box model */
width: 250px;
height: 150px;
padding: 20px;
border: 10px solid #3498db;
background-color: #ecf0f1;
}
Explanation: The total rendered width is 310px (250px width + 40px padding + 20px border). The total height is 210px (150px height + 40px padding + 20px border). The width and height properties define the dimensions of the content area only.
Example 2: Content Box with Padding
.content-box-with-padding {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 50px; /* Padding is added to the outside of the width and height */
background-color: #f1c40f;
}
Explanation: Here, the element's visible width becomes 300px (200px width + 100px left/right padding), and its visible height becomes 200px (100px height + 100px top/bottom padding). The padding expands the overall size of the element.
Example 3: Content Box with Border
.content-box-with-border {
box-sizing: content-box;
width: 100%;
height: 75px;
border: 15px dashed #e74c3c; /* The border is added externally */
background-color: #e0e0e0;
}
Explanation: If this element is placed inside a container that is 400px wide, its content area will be 400px. However, its total width will be 430px because the 15px border on both the left and right sides is added to the content width.
Example 4: Content Box and Margin
.content-box-and-margin {
box-sizing: content-box;
width: 180px;
height: 180px;
border: 2px solid #2ecc71;
margin: 25px; /* Margin adds space outside the border */
background-color: #ffffff;
}
Explanation: The margin property adds space around the element but does not alter the element's calculated size. The total width of the element is 184px (180px width + 4px border), and the margin adds a 25px buffer around it.
Example 5: Two Sibling Content Boxes
.sibling-content-box {
box-sizing: content-box;
width: 50%; /* Each element aims for 50% of the parent's width */
padding: 10px;
border: 1px solid #9b59b6;
float: left; /* Aligns elements side-by-side */
}
Explanation: These two sibling elements will not fit on the same line. Each element's total width will be 50% plus 20px of padding and 2px of border, causing the combined width to exceed 100% of the parent container, forcing a wrap.
Example 6: Content Box with Percentage-Based Padding
.content-box-percentage-padding {
box-sizing: content-box;
width: 300px;
height: 120px;
padding: 5%; /* Padding percentage is based on the parent's width */
border: 4px solid #1abc9c;
background-color: #fafafa;
}
Explanation: Assuming the parent container is 500px wide, the padding will be 25px (5% of 500px) on all sides. The total width becomes 358px (300px width + 50px padding + 8px border).
Example 7: Overriding a Global Box-Sizing Rule
* {
box-sizing: border-box; /* A common modern practice for intuitive sizing */
}
.specific-content-box {
box-sizing: content-box; /* Reverting to the default for this specific class */
width: 220px;
height: 110px;
padding: 15px;
border: 3px solid #34495e;
background-color: #bdc3c7;
}
Explanation: This demonstrates how to apply the content-box model to a single element even when a universal border-box rule is in place. Its total width will be 256px (220px + 30px padding + 6px border), differing from the border-box calculation.