Two(2) ways to prevent padding from causing an overflow in CSS
Tags: css
Published: 2021-11-28 22:46:44

When padding is added to an element with a width or a height of 100% it causes that element to overflow. It’s no surprise since padding creates extra space within an element.

To fix this issue caused by padding, in this tutorial I am going to introduce two(2) ways of tackling this.


## Introduction

By default in CSS, an element's actual width and height is **width** + **padding** + **border**. Meaning, when we give an element a width of maybe 10px, the actual width of that element becomes **10px** + **padding** + **border**. This is why giving it padding or border when it is already at 100% will cause an overflow.
This problem can be solved in the following ways:

1. Using CSS Box-sizing property
2. Using the CSS calc() function


## 1. Using CSS Box-sizing property

Using **box-sizing** is the best way of tackling the issue of an overflow caused by padding. 
The box-sizing property will allow us to define how the width and height of an element are calculated. The default value of the **box-sizing** property is `content-box`, but when we set it to `border-box` this will make the element’s padding and border to also be included in its width and height. 
Meaning if we set the element as a **width/height** of `10px` and add padding or a border of `2px`, the element’s actual **width/height** will still be `10px` except the padding + border is greater than `10px`

Example:

```CSS
.div{
   width: 10px;
   height: 10px
   padding: 2px;
   border: 2px;
}
```

Element's actual width = width + padding + border
Element's actual width = 10px + 4px + 4px = 18px

This is the same for the height.
Element's actual height = 10px + 4px + 4px = 18px

We used 4px instead of 2px for the border and padding because in our code we are adding 2px to both the left and right sides of the element.

But with the box-sizing property:

```CSS
.div{
   width: 10px;
   padding-right: 5px;
   border-right: 5px;
   box-sizing: border-box;
}
```

Element's actual width = 10px + 5px + 5px = 10px
Element's actual height = 10px + 4px + 4px = 10px


## 2. Using the CSS calc() function

The `calc()` function allows us to perform calculations when we want to specify a property value. The cool thing about the `calc()` function is that even when the values are in a different unit, it can still be used to calculate the adding(+), subtraction(-), multiplication(*) and division of the values. 
For example, we can use the `calc()` function to do something like this:

```CSS
.div{
   width: calc(100% - 20px)
}
```

For the overflow issue of adding padding to a 100% width/height element Using the `calc()` function is not the most efficient way of going about it but it will still suffice.

Here is how we go about using the `calc()` function to handle the overflow issue:

```CSS
.div{
   width: calc(100% - 20px - 20px )
   height: calc(100% - 20px - 20px )
   padding: 10px
   border: 10px
}
```

## Conclusion

In this article, we have learned how to use the **box-sizing** property and `calc()` function in CSS to prevent padding from causing an overflow. If you know of any other ways of doing this, feel free to drop it in the commend section below.