Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
width: 200px, padding and border are added to that width, making the element bigger than expected. The box-sizing property changes this behavior.width: 200px + padding: 20px + border: 5px = ?Problem: The total width is actually 250px, not 200px! This makes sizing calculations confusing.
Solution: Use box-sizing: border-boxto include padding and border in the width.
Width/height applies only to content. Padding and border are added on top.
box-sizing: content-box;width: 200px;padding: 20px;border: 5px solid;Total Width:
250px
200 + (20×2) + (5×2) = 250px
Width/height includes content, padding, AND border. Much more intuitive!
box-sizing: border-box;width: 200px;padding: 20px;border: 5px solid;Total Width:
200px
Exactly as specified!
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>📦 Box Sizing Comparison</h1>
<div class="comparison">
<div class="section">
<div class="label label-red">content-box (default)</div>
<div class="box content-box">
width: 200px
</div>
<div class="measurement">
Actual Total Width:<br>
<strong>250px</strong>
<div style="font-size: 10px; margin-top: 5px;">
200 + (20×2) + (5×2)
</div>
</div>
</div>
<div class="section">
<div class="label label-green">border-box ⭐</div>
<div class="box border-box">
width: 200px
</div>
<div class="measurement">
Actual Total Width:<br>
<strong>200px</strong>
<div style="font-size: 10px; margin-top: 5px;">
Exactly as specified!
</div>
</div>
</div>
</div>
<div class="note">
💡 Both boxes have the same CSS (width: 200px, padding: 20px, border: 5px)
but look how different they are!
</div>
</div>
</body>
</html>Loading preview...
box-sizing: border-box to all elements at the start of their CSS. This makes sizing predictable and intuitive across the entire site.Add this at the top of your CSS file:
* {
box-sizing: border-box;
}This applies border-box to every element, making width/height calculations consistent and predictable.
"I want this div to be 300px wide"
→ It's exactly 300px wide!
"I want this div to be 300px wide"
→ It's actually 350px... wait, what?
* { box-sizing: border-box; } for consistency