Dimensionamiento de cajas - Trucos CSS

Anonim

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 el padding-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

  • width
  • height
  • padding
  • border

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.