Why use / not use * box-sizing?

Question

Why use / not use * box-sizing?

Navigation

#1 by (6 votes)
#2 by (5 votes)

15

I've read a lot about discussions about whether or not to use the box-sizing: border-box; property as follows:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

I know she's very influential, especially in layout design, such as the interaction between borders, paddings, etc.

But why use it this way? Or why not use it? Once you're applying style to all elements.

In some cases I used, I could notice a huge repetition of properties when the DOM hierarchy was deep.

If it's not used this way, would it be the right thing to set only on the properties I'm going to need?

Or rather, what is the real function of the box-sizing property? And what, in fact, is the best way to use this function?

css css3

asked by anonymous 26.11.2015 / 20:42

2 answers

5

This article by Sergio Lopes talks about the subject and shows how the box-model is confusing.

You use this property to define that, the size of an element must be calculated from its edge. The simplest way to understand it is with a snippet:

.a, .b {
  border: 20px solid #000;
  background: skyblue;
  font-size: 4em;
  margin: 2px;
  height: 100px;
  width: 300px
}

.b {
  box-sizing: border-box
}

<div class='a'>sopt</div>
<div class='b'>sopt</div>

Note that both elements are 300 pixels wide.

The height and width of .a are calculated considering only its contents (default value: box-sizing:content-box ), borders and padding are not included in the calculation and if you include a border: 20px solid #ccc your box size will be 200px + 40px.

With border-box , the calculation will be the size of the box including the border and inner margin.

If it were to answer "Why use?", I would simply say to avoid surprises during development.

26.11.2015 / 21:30

CSS will-change property: when to use? What is the difference between htm, html, dhtml and ghtml?

score 6 · Accepted Answer

There are two main reasons you want to standardize the box model in your documents, or at least a part of them:

You want or need to use the "traditional" model ( border-box , the old model that everyone used, and which survived longer in IE), which is more intuitive and may be the only solution in certain situations of intricate layouts.

You are styling a form and nothing seems to make sense. This is because form elements use different box models , until today, in several browsers. Even certain elements are still provided by the operating system, not by the browser (the "replaced" elements in the CSS language).

You can see that at least standardizing the box model of forms is a sensible decision. How to standardize everything - changing box-sizing to element html , and the other inheritance with *, *:before, *:after , is at your discretion. Regardless of the box model with which you decide to work, there may always be some specific case where the other box model would be a hand on the wheel. In these cases you can apply box-sizing individually to whatever you need.