Two(2) ways to prevent padding from causing an overflow in CSS

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:

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

.div{
   width: 10px;
   padding-right: 2px;
   border-right: 2px;
   box-sizing: border-box;
}

Element's actual width = 10px + 2px + 2px = 10px
Element's actual height = 10px + 2px + 2px = 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:

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

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