Modelo de caja
Definición
Cada elemento, sea inline
o block
, es considerado como una caja, que se compone
de la siguiente forma:
box-sizing
puede ser content-box
(por defecto) o border-box
.
box-sizing: border-box;
: sirve para que todos
los elementos ocupen el width/height establecido teniendo en cuenta los margin, paddings, etc
establecidos. Si no, sumará al width/height establecido los margin, padding, etc. y ocupará más espacio
del deseado.
Suele aplicarse con el selector universal, para que afecte a todos los elementos de la
web ( * { box-sizing: border-box }
)