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.
