La box-sizingpropiedad en CSS controla cómo se maneja el modelo de caja para el elemento al que se aplica.
.module ( box-sizing: border-box; )Una de las formas más comunes de usarlo es aplicarlo a todos los elementos de la página, incluidos los pseudoelementos:
*, *::before, *::after ( box-sizing: border-box; )Esto a menudo se denomina "dimensionamiento universal de cajas", ¡y es una buena forma de trabajar! El (literal) widthque establece es el ancho que obtiene, sin tener que realizar cálculos mentales y administrar la complejidad que proviene de los anchos que provienen de múltiples propiedades. Incluso tenemos un día de concientización sobre el tamaño de las cajas por aquí.
Valores
content-box: el valor por defecto. Los valores de ancho y alto se aplican solo al contenido del elemento. El relleno y el borde se agregan al exterior de la caja.padding-box: Los valores de ancho y alto se aplican al contenido del elemento y su relleno. El borde se agrega al exterior de la caja. Actualmente, solo Firefox admite elpadding-boxvalor.border-box: Los valores de ancho y alto se aplican al contenido, el relleno y el borde.inherit: hereda el tamaño de caja del elemento padre.
Ejemplo
Esta imagen de ejemplo compara el valor predeterminado content-box(arriba) con border-box(abajo):
La línea roja entre las imágenes representa el valor de ancho de los elementos. Tenga en cuenta que el elemento con el valor predeterminado box-sizing: content-box;excede el ancho declarado cuando el relleno y el borde se agregan al exterior del cuadro de contenido, mientras que el elemento con box-sizing: border-box;aplicado se ajusta completamente dentro del ancho declarado.
Usando el tamaño de caja
Digamos que establece un elemento en width: 100px; padding: 20px; border: 5px solid black;. De forma predeterminada, el cuadro resultante tiene 150 píxeles de ancho. Esto se debe a que el modelo de tamaño de caja predeterminado es content-box, que aplica el ancho declarado de un elemento solo a su contenido, colocando el relleno y el borde fuera de la caja del elemento. Esto aumenta efectivamente la cantidad de espacio que ocupa el elemento.
Si cambia box-sizinga padding-box, el relleno se inserta dentro de la caja del elemento. Entonces, la caja tendría 110 px de ancho, 20 px de relleno en el interior y 10 px de borde en el exterior. Si desea poner el relleno y el borde dentro de la caja, puede usar border-box. El cuadro tendría entonces 100 px de ancho: los 10 px del borde y los 20 px de relleno se insertan dentro del cuadro del elemento.
Manifestación
Consulte la Comparación de lápiz de valores de tamaño de caja por CSS-Tricks (@ css-tricks) en CodePen.
Relacionado
widthheightpaddingborder
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna *† | 3 * † | 1 ‡ | 7 * | 8 * | 2,1 * † | Alguna * |
* padding-boxno soportado
† las versiones anteriores requieren -webkitprefijo (Chrome 1-9, Safari 3-5, Android 2.1-3.x)
‡ Se -mozrequiere prefijo hasta la versión 28, sin prefijo a partir de la 29.
