Why and How to Use Box-Sizing: 'Border-Box' in Your CSS Layouts
Tags: css, tailwindcss, frontend
Published: 2024-07-05 02:28:59

When working with CSS, one of the most crucial yet often misunderstood properties is `box-sizing`. This property plays a significant role in how elements are sized and can make the difference between a layout that behaves as expected and one that doesn't. In this article, we'll dive deep into the `box-sizing` attribute, understand its variations, and explore why it is essential for creating consistent and predictable layouts.

#### What is `box-sizing`?

The `box-sizing` property allows us to control how the width and height of an element are calculated. By default, CSS uses the `content-box` value for `box-sizing`, which means the width and height you set for an element only include the content area, excluding padding and border. However, this default behaviour can often lead to unexpected results, especially when adding padding and borders.

#### Variations of `box-sizing`

There are two primary values for the `box-sizing` property:

1. `content-box` (default): The width and height properties include only the content. Padding and border are added outside of the content area, increasing the total size of the element unexpectedly.
    
2. `border-box`: The width and height properties include the content, padding, and border. This means the total size of the element is constrained to the specified width and height, regardless of padding or border.
    

Let's explore how these variations work with some practical examples.

#### Example: `content-box` vs. `border-box`

Consider the following HTML and CSS:

```html
<div class="content-box">Content Box</div>
<div class="border-box">Border Box</div>
```

```css
div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid #333;
  margin: 10px;
}

.content-box {
  box-sizing: content-box; //the default
  background-color: lightblue;
}

.border-box {
  box-sizing: border-box;
  background-color: lightcoral;
}
```

### Results


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r21dsz6uiehnj2bf949p.png)

When using `content-box`, the actual rendered size of the `.content-box` element is:

* Width: 200px (content) + 40px (padding) + 20px (border) = 260px
    
* Height: 100px (content) + 40px (padding) + 20px (border) = 160px
    

In contrast, when using `border-box`, the `.border-box` element's total size remains exactly 200px by 100px because the padding and border are included in the specified dimensions.

#### Why is `box-sizing` Important?

1. **Predictable Layouts**: By using `box-sizing: border-box`, you ensure that the dimensions you set are the dimensions you get. This predictability is crucial when creating complex layouts, especially in responsive design where elements must fit perfectly within their containers.
    
2. **Simplified Calculations**: With `border-box`, you don't have to calculate and adjust for padding and border manually, simplifying the process of setting element sizes.
    
3. **Consistency Across Elements**: Applying `box-sizing: border-box` globally ensures a consistent box model throughout your project, reducing the chances of layout inconsistencies and bugs.
    

#### Practical Example: Global `box-sizing`

A common best practice is to apply `box-sizing: border-box` to all elements using a universal selector:

```css
*, *::before, *::after {
  box-sizing: border-box;
}
```

This rule ensures that all elements, including pseudo-elements, adhere to the `border-box` model, providing a solid foundation for your layouts.

#### Maintaining Dimensions with Borders

Consider the following example where we have a simple circle without any `box-sizing` applied:

```javascript
htmlCopy code<body>
    <div class='a'></div>
<body>
<style>
    body {
        background: pink;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .a {
        background: black;
        height: 100px;
        width: 100px;
        border-radius: 100%;
    }
</style>
```

**Result:**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bysn91u0ydq72e94vi5j.png)

  
  
Here, no `box-sizing` is needed as no additional elements like borders or padding affect its 100px width and height.

Now, let's say you want to add a border to the circle while still maintaining its dimensions:

```javascript
htmlCopy code<body>
    <div class='a'></div>
<body>
<style>
    body {
        background: pink;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .a {
        background: black;
        height: 100px;
        width: 100px;
        border-radius: 100%;
        border: 30px solid purple;
    }
</style>
```

**Result:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sml163cznjfyb827ei0.png)

Simply adding the border increases the width and height by 60px each (30px border on all sides). To maintain the original dimensions, you could reduce the width and height by 60px, but using `box-sizing: border-box` allows you to avoid manual calculations:

```javascript
<body>
    <div class='a'></div>
<body>
<style>
    body {
        background: pink;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .a {
        background: black;
        height: 100px;
        width: 100px;
        border-radius: 100%;
        border: 30px solid purple;
        box-sizing: border-box; //simply add this
    }
</style>
```

**Result:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbyiyu0m0jlw7a1kwo0m.png)

Adding the `box-sizing: border-box` attribute helps you maintain the circle's dimensions while achieving your design goals.

#### Creative Uses of `box-sizing`

Beyond maintaining consistent layouts, `box-sizing` can be creatively used to achieve specific design effects. For example, when creating a button with equal padding inside, using `border-box` ensures that adding borders or increasing padding does not affect the overall size of the button, preserving the design integrity.

```css
button {
  padding: 10px 20px;
  border: 2px solid #000;
  background-color: #f0f0f0;
  box-sizing: border-box;
}
```

Here, the button's size remains consistent, regardless of any changes to padding or border, making it easier to maintain uniformity across different buttons.

#### Conclusion

Understanding and effectively using the `box-sizing` property is vital for any CSS developer aiming to create reliable and maintainable layouts. By adopting `box-sizing: border-box`, you can simplify your CSS, avoid common pitfalls, and ensure that your designs are consistent across different elements and screen sizes. Embrace the power of `box-sizing` to keep your layouts in perfect order and elevate your CSS skills to the next level.  
  
See you on the next one!