Width 100% with Padding - CSS

CSS is a powerful tool used for defining the look and feel of HTML elements. One common issue developers face is how to create an element that takes up 100% of the width of its container while also applying padding to the element. In this article, we'll look at how to achieve this with CSS.

The Problem

The challenge developers face is in getting the padding to be included in the element's width calculation. By default, padding is added to the content of an element, but it is not included in the element's width.

For example, if we have an element with a width of 100% and a padding of 10px:

<div class="box">Hello World!</div>

.box {
  width: 100%;
  padding: 10px;
}

The resulting element will have a width of 100% + 20px (10px for each side of padding), which will cause it to overflow its container.

The Solution

To solve this problem, we can use the CSS box-sizing property. This property sets how the total width and height of an element is calculated.

By default, box-sizing is set to content-box, which means the width and height only include the content of the element, not the padding or border.

We can change this to border-box, which makes the width and height include the content, padding, and border of the element.

* {
  box-sizing: border-box;
}

This applies border-box to all elements on the page, which will make all elements include padding and border in their width and height calculations.

Applying the Solution

With box-sizing set to border-box, we can now apply padding to an element with a width of 100% without causing it to overflow its container.

<div class="box">Hello World!</div>

.box {
  width: 100%;
  padding: 10px;
  border: 1px solid black;
}

This will create an element that takes up 100% of its container, with 10px of padding and a 1px black border.

Conclusion

By setting box-sizing to border-box, we can include padding and border in an element's width and height calculations. This allows us to create elements that take up 100% of their container without causing overflow due to padding.