Definición de .box-sizing en CSS
La propiedad .box-sizing en CSS controla cómo se maneja el modelo de caja para el elemento al que se aplica.
Caso de empleo de box-sizing
Esta propiedad de CSS habitualmente se emplea de la siguiente manera:
.module {
box-sizing: border-box;
}Otro ejemplo más avanzado de .box-sizing es el siguiente de CODEPEN:
Sintaxis de .box-sizing en CSS
box-sizing: content-box|border-box|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| cuadro de contenido | Defecto. Las propiedades de ancho y alto (y las propiedades mín./máx.) incluyen solo el contenido. El borde y el relleno no están incluidos. | |
| cuadro de borde | Las propiedades de ancho y alto (y las propiedades mín./máx.) incluyen contenido, relleno y borde | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .box-sizing
Los números de la tabla especifican la primera versión del navegador que es plenamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| break-after | 50.0 | 10.0 | 65.0 | 10.0 | 37.0 |
Referencias técnicas
- CSS-Tricks article on box-sizing
- CSS-Tricks article on inherited box-sizing
- MDN Docs
- Paul Irish on using border-box universally
