Make your life easier with CSS Box Sizing
Stop wasting time recalculating your elements’ dimensions
The 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 padding and 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' width and height, enlarging it. In case you want to change elements' dimensions, you will have to adjust it accordingly:
The border-box value adds padding and 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! ✌️
This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +403,714 people.
Subscribe to receive our top stories here.
