box-sizing co to i po co stosować?

Mały trick który działa we wszystkich przeglądarkach w tym IE8 ;).

Robimy div o wymiarach 150px na 50px. Jeżeli do niego dodamy teraz padding, powiedzmy 5px oraz border 1px solid red;

Dostaniemy tak naprawdę div o wymiarach:

150px szerokości + 5px z każdej strony + 1px z każdej strony co da nam = 162px
na wysokość podobnie:
50px + 5px z każdej strony + 1px z każdej strony co da nam = 62px

No i z naprawą tego problemu przychodzi nam właśnie box-sizing. Do całego stylu dodajemy:

.box {
  width: 150px;
  height: 50px;
  padding: 5px;
  border: 1px solid red;
  box-sizing:border-box;
}

Po sprawdzeniu dostajemy nasze upragnione wymiary - 150px na 50px prosto, czysto i działa wszędzie, można również dodać coś takiego do stylu resetującego ustawienia całej strony.

* {
  box-sizing:border-box;
}

Wtedy rozwiązanie będzie działało na wszystkie elementy w naszej stronie. Nie popieram użycia * {} w stylach więc dodaję zawsze w zależności od potrzeb do konkretnego elementu na stronie.

Kompatybilność można sprawdzić na http://caniuse.com/#search=box-sizing