La propiedad CSS box-sizing como el user agent debe calcular el ancho y alto total de un elemento.

Por defecto en el modelo de caja de CSS, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algun borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier borde o relleno que se pueda añadir.

La propiedad box-sizing puede ser usada para ajustar el siguiente comportamiento:

  • content-box es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado.
  • border-box le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.

Sintásis

La propuedad box-sizing es especificada como una sola palabra clave elegida de la lista de valores que aparece abajo.

Valores

content-box
Este es el valor inicial y por defecto especificado por el estándar CSS. Las propiedades width and height no incluyen el borde, relleno o margen. Por ejemplo, .box {width: 350px; border: 10px solid black;} despliega una caja con un ancho de 370 pixeles.
Aquí, las dimensiones de un elemento son calculados como: ancho = ancho del contenido, altura = altura del contenido. (Los bordes y rellenos no son incluídos en el cálculo.)
border-box
Las propiedad de width y height incluyen el contenido, relleno y borde pero no incluyen el margén.  properties include the content, padding, and border, but do not include the margin. Tenga en cuenta que el relleno y borde estarán dentro de la caja. Por ejemplo, .box {width: 350px; border: 10px solid black;} despliega una caja con un ancho de 350 pixeles. La caja de contenidos no puede ser negativo y tiene un valor mínimo de 0, haciendo imposible usar el border-box para hacer que el elemento desaparezca.
Las dimensiones del elemeno se calculan como: ancho = borde + relleno + ancho del contenido, y altura = borde + relleno + altura del contenido.

Sintaxis formal

content-box | border-box

Ejemplo

Este ejemplo muesta cómo diferentes valores de tamaño de la caja (box-sizing) alteran el tamaño desplegado de dos elementos idénticos.

HTML

<div class="content-box">Contenido de la caja</div>
<br>
<div class="border-box">Borde de la caja</div>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* Ancho  total: 160px + (2 * 20px) + (2 * 8px) = 216px
     Altura total: 80px + (2 * 20px) + (2 * 8px) = 136px
     Ancho de la caja de contenido: 160px
     Altura de la caja de contenido: 80px */
}

.border-box { 
  box-sizing: border-box;
  /* Ancho total: 160px
     Altura total: 80px
     Ancho de la caja de contenido: 160px - (2 * 20px) - (2 * 8px) = 104px
     Altura de la caja de contenido: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Resultado

Especificaciones

Especificación Estatus Comentario
CSS Basic User Interface Module Level 3
La definición de 'box-sizing' en esta especificación.
Recommendation Definición inicial

Valor inicialcontent-box
Applies toall elements that accept width or height
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Compatibilidad del navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 10
Notas
Soporte completo 10
Notas
Notas box-sizing is not respected when the height is calculated from window.getComputedStyle().
Soporte completo 1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Soporte completo 12
Soporte completo 12
Soporte completo 12
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Soporte completo 29
Soporte completo 29
Soporte completo 1
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -moz-
Notas Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
Soporte completo 49
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Soporte completo 44
Prefijado Deshabilitado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Deshabilitado From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Soporte completo 8
Notas
Soporte completo 8
Notas
Notas box-sizing is not respected when the height is calculated from window.getComputedStyle().
Opera Soporte completo 7Safari Soporte completo 5.1
Soporte completo 5.1
Sin soporte 3 — ?
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo 4
Notas
Soporte completo 4
Notas
Notas box-sizing is not respected when the height is calculated from window.getComputedStyle().
Soporte completo 2
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android ? Edge Mobile Soporte completo Si
Soporte completo Si
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Android Soporte completo 29
Soporte completo 29
Soporte completo 4
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -moz-
Notas Before Firefox 23, box-sizing is not respected when the height is calculated from window.getComputedStyle().
Soporte completo 49
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Soporte completo 44
Prefijado Deshabilitado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Deshabilitado From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android ?
padding-box
DeprecatedNo estándar
Chrome Sin soporte NoEdge Sin soporte NoFirefox Sin soporte 1 — 50IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android ? Edge Mobile Sin soporte NoFirefox Android Sin soporte 4 — 50Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
No estandar . Esperar poco soporte entre navegadores.
No estandar . Esperar poco soporte entre navegadores.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Ver también

Etiquetas y colaboradores del documento

Etiquetas: 
Colaboradores en esta página: IsraelFloresDGA, GiioBass, Derhks, Sebastianz, juandiegoles
Última actualización por: IsraelFloresDGA,