How to make an element width 100% minus padding with CSS?

Spread the love

Sometimes, we want to make an element width 100% minus padding with CSS.

In this article, we’ll look at how to make an element width 100% minus padding with CSS.

How to make an element width 100% minus padding with CSS?

To make an element width 100% minus padding with CSS, we use the box-sizing: border-box style.

For instance, we write

.content {
  width: 100%;
  box-sizing: border-box;
}

to set the width of the elements with class content to 100% with width: 100%;.

Then we add box-sizing: border-box to subtract the padding width from the overall width.

Conclusion

To make an element width 100% minus padding with CSS, we use the box-sizing: border-box style.

Leave a Reply

Your email address will not be published.