Interesting Facts About CSS Box Model
Last Updated :
27 Feb, 2025
Improve
The CSS Box Model is the foundation of layout and spacing in web design. Let’s explore some interesting facts that will help you work with it more effectively.
1. Padding and Border Expand the Element Size
Many developers forget that padding and borders add extra space around an element, which can unexpectedly change the overall size of the element.
- Element size increases: The width and height of the element are affected by padding and border.
- Box-sizing matters: The default box-sizing: content-box includes padding and border in the element’s total size.
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- The total size of the .box increases because of padding and borders.
- The total width becomes 250px (200px + 20px padding + 5px border on each side).
- The total height becomes 150px (100px + 20px padding + 5px border on each side).
2. Box-Sizing Can Control Element Size Calculation
The box-sizing property controls whether padding and border are included in the element’s total width and height, which is useful for consistent layout management.
- Content-box: Padding and border are added outside the width and height (default).
- Border-box: Padding and border are included inside the width and height, keeping the size consistent.
<html>
<head>
<style>
.box-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid black;
background-color: lightgreen;
}
.box-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box-content"></div>
<div class="box-border"></div>
</body>
</html>
- The .box-content uses the default box-sizing: content-box, so padding and border increase the total size.
- The .box-border uses box-sizing: border-box, so padding and border are inside the 200px width and height.
3. Negative Margins Can Pull Elements Closer
Negative margins allow elements to overlap or move closer than their normal layout would allow.
- Overlapping elements: Negative margins pull the element towards neighboring content.
- Fine-tuning: They are useful when you need precise layout adjustments.
- Can cause overlap: Negative margins can make elements overlap if used incorrectly.
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightyellow;
margin-bottom: -20px; /* Negative margin */
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box" style="background-color: lightpink;"></div>
</body>
</html>
- The first .box has a negative margin, which pulls it closer to the second .box.
- This causes both boxes to overlap slightly.
4. Auto Margin Can Center Flex Items
Using margin: auto on flex items is a simple and powerful trick to center them within a flex container.
- Centered items: margin: auto centers the item horizontally or vertically.
- No extra properties: No need for additional positioning or calculations.
- Works with flex containers: This only works inside a flex container.
<html>
<head>
<style>
.container {
display: flex;
height: 100vh;
}
.box {
margin: auto;
width: 200px;
height: 100px;
background-color: lightseagreen;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
- The .box has margin: auto, which automatically centers it within the .container.
- This centers the box both horizontally and vertically.
