What does * { box-sizing: border-box; } do? What are its advantages?

#webdev #css #html #beginners

The rule:

* {
    box-sizing: border-box;
  }

uses the universal selector to activate the Alternative Box Model for all elements in a document. In this box model, the width and height of an element is set to extend to the border edges of the box.

The default box model applied is the Basic Box Model, with box-sizing: content-box;. We have to use the * universal selector to change the default box sizing of all elements to border-box.

The Alternative Box Model implemented with box-sizing: border-box extends the height and width of an element to the border edges. So, any padding and border added are contained within the height and width and the content area shrinks to accommodate space for padding and border values.

Advantages
The advantages of using border-box are:

Setting the height and weight to the border edges reflects the actual space being occupied and displayed on the screen.
This makes design calculations and logic easier for developers.
It helps make the box model and hence the layout more consistent in terms of interaction with other elements.
Layouts are more predictable and easier to visualize.

References