Interesting Facts About CSS Box Model

Last Updated : 27 Feb, 2025

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

<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.

JavaScript

<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

<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

<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.

anujpaz9pe

Improve

Article Tags :

Interesting Facts About CSS Box Model

1. Padding and Border Expand the Element Size

2. Box-Sizing Can Control Element Size Calculation

3. Negative Margins Can Pull Elements Closer

4. Auto Margin Can Center Flex Items

Similar Reads

Thank You!

What kind of Experience do you want to share?