box-sizing

Índice

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.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
break-after 50.0 10.0 65.0 10.0 37.0

Referencias técnicas

Puede que también te interesen estas propiedades de CSS

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso