Question

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

Answer 1

Answer:

Advantages of border-box are as follows:-

1. Width and height of the box is reflected by padding , content and border of the box or container from inside

For example:-

i.) Let us say we have the container or div with width of 350px and height of 250px.

ii.) If we apply padding to a given div of 10px and border is of 2px and box-sizing is border-box and then total width of a given div is a calculated by adding 350 + 10 + 2 = 362px and then total height of a given div is a calculated by adding 250 + 10 + 2 = 262px.

Note:- The appearance of the div is not affected on the given screen which is the main advantage of using border box and it doesn't include the margin.