CSS box-sizing

   CSS

CSS box model CSS Level 1, by default adds extra spacing to the block level elements. To understand it better, if you set a width of 30% on an element and then add 20px of padding, it becomes 30%+20px wide. This additional spacing to the element can cause alignment issues across the browsers and devices.

CSS3 Level 3 ‘box-sizing’ property comes to the rescue and improves everything. Using ‘box-sizing’ you can remove element’s extra spacing. Post that if you set an element width to 30% and add 20px of padding, it will adjust the overall width within given width rather than adding to it.

CSS Example

div{
   width: 30%;
   padding: 20px;
   box-sizing: border-box;
}

Browser support

‘box-sizing’ is well supported throughout all the major browsers. You can also check the browser support available via caniuse.com support table.

Further Reading

CSS-Tricks
Can I Use?
MDN box-sizing

Tags: Border-BoxBox SizingCSS3

Leave a Comment