Make your life easier with CSS Box Sizing
Stop wasting time recalculating your elements’ dimensions
box-sizing property is a simple concept that can make your development much faster, since it allows you to not make calculations on elements' dimensions. It defines how the properties
border will be added to an element.
There are two values:
content-box, which is default, and
border-box. When the property is set to default, padding and border are added to the to the total elements'
height, enlarging it. In case you want to change elements' dimensions, you will have to adjust it accordingly:
border-box value adds
border to the element without changing its dimensions. The space available to the content is shrunk in order to make room for them. Any time you change the elements' dimensions, everything is recalculated automatically for you:
One thing to remember:
box-sizing does not apply to
margin, it will never be added within elements' dimensions.
You can also find a video explanation at Code Sketch Channel 🎬.
Thanks for reading! ✌️