Box Sizing in CSS

CodeVigyaan is a free education platform offering programming tutorials, study materials, notes, and real project ideas for college student.

In CSS, every element in the page is like a rectangular box. When you specify a size for an element, you might think that is the size of the box that you are working with. Although the width or height is specified, adding some padding or border can change the overall size of the box. The box-sizing property is used to tell how the browser should calculate the width or height of that box. It specifies whether the width and height should include the padding and border or add it around it.

There are two main types of box-sizing in CSS:

1. Content-box (Default)

This is set as the default in CSS.

The width and height that you specify are the width and height of the content area only.

Padding and border are added outside the width and height.

This causes the overall size of the element to be larger than you specified.

It can also cause layout problems if you‘re not careful.

Example:
Suppose, you set width as 300px and padding as 20px, the 300px width ends up expanding more than 300px as the padding and border is added separately.

2. border-box (Highly Recommended)

For this model instead of in content, padding and border.

The overall size of the element is exactly what you specified.

Content area auto resizes to fit in.

It simplifies and makes layouts more predictable.

This is the way most modern developers write it.

Example:
Suppose you set width to 300px with padding and border, the total width remains 300px.

Reasons why border: box is Better…315border: box is often associated with better rendering in general. But the main advantage of border: box is that it makes elements more consistent across browsers; in IE you can only set width and height of block elements when you use content: box, but with border: box you can.

Stop unexpected expansion of size

– Makes responsive design easier

Works very well with Flexbox and Grid

Lowers calculation confusion

2010 Keeps arrangements clean and controlled

Best Practice

Most developers apply border-box to all elements like this:
*,

*:: before,.however, do not. A good example of using content and counter is toNumberTheStyles. R is the style name of the root element. Parameter u is the counter value, 2 in this case. Parameter s is the style name. In the example, the styles are arabic, lower – alpha, upper – alpha, decimal, upper – roman andlower – roman.

*:: after { }

box-sizing: border-box;

}

Final Summary

The box-sizing property controls how the size of the element is calculated.
Content-box provides padding and border outside the width specified.
Border-box include in the set width padding and border.
By setting the box-sizing to border-box, layout of the CSS becomes easier and more predictable.