What is box-sizing

Box-sizing property in CSS is a way of calculating the width and height of an element. It's all about whether to include box model properties like padding, margin & border to the total width or height of the element.

Contents

• 1. Intro
  • 1.1 Without box-sizing
  • 1.2 With box-sizing
• 2. Type and demo
• 3. Reset

1. Intro

The box-sizing property in CSS controls how the box model is handled for the element. latest suppose we have a div element with width:100px (set width), padding:20px, border:10, margin:20px. Now with the help of box-sizing we can define whether to add padding and border within the set width that is total visible width=140px or, to add it outside the width that is total visible width=200px.

1.1 Without box-sizing

Width/Height +padding +border +margin = actual visible width of elements. since the width and height, for an element are allowed greater than the set width and height of an element.

1.2 With box-sizing

Width/Height +margin = actual visible width of elements. Box-sizing Makes sure that the total width and height of the HTML elements include padding and border. As a result, elements do not appear bigger than they should be.

2.Type and demo

$ content-box : the default box-sizing . Width and height values apply to the element’s content only. The padding and border are added to the outside of the box.

• Total width = padding+border+margin+set width : box-sizing : content-box;

  .div{
  box-sizing: content-box;
  width:200px; 
  height:150px;
  padding: 20px;
  border: 10px solid black;
}

$ padding-box: Width and height values apply to the element’s content and its padding. The border is added to the outside of the box. Currently, only Firefox supports the padding-box value.(deprecated/obsolete)

• Total width = border + margin + set width : box-sizing : padding-box;

  .div{
  box-sizing: padding-box;
  width:200px; 
  height:150px;
  padding: 20px;
  border: 10px solid black;
}

$ border-box: most commonly use the box-sizing property. Width and height values apply to the content, padding, and border.

• Total width = margin + set width : box-sizing : border-box;

  .div{
  box-sizing: border-box;
  width:200px; 
  height:150px;
  padding: 20px;
  border: 10px solid black;
}

$ Inherit: Inherits the box-sizing of the parent element.

• Total width = inherit width : box-sizing : inherit;

  .div{
  box-sizing:inherit;
  width:200px; 
  height:150px;
  padding: 20px;
  border: 10px solid black;
}

Demo

Try it yourself

3. Reset

The earliest box-sizing: border-box; reset looked like this:

* {
  box-sizing: border-box;
}

This works fairly well, but it leaves out pseudo-elements, which can lead to some unexpected results. A revised reset that covers pseudo-elements quickly emerged: Universal Box Sizing

*, *:before, *:after {
  box-sizing: border-box;
}

This method selected pseudo-elements as well, improving the normalizing effect of the border-box. But, the * selector makes it difficult for developers to use the content-box or padding-box elsewhere in the CSS. This brings us to the current frontrunner for best practice:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

This reset gives you more flexibility than its predecessors — you can use content-box or padding-box (where supported) at will, without worrying about a universal selector overriding your CSS

That's it! I hope this blog finds you helpful regarding box-sizing. Thanks for reading 🙏