Traducción en curso

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Introducción

La propiedad box-sizing se usa para modificar las propiedades por defecto del CSS box model que calculan el alto y el ancho de los elementos . De hecho es posible usarla para emular el comportamiento de los navegadores que no soportan las especificaciónes del CSS box model.

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

Syntax

box-sizing: content-box;
box-sizing: padding-box;
box-sizing: border-box;

box-sizing: inherit;

Valores

content-box
Este es el estilo por defecto especificado en el estándar de CSS . Las propiedades widthheight son las medidas incluídas solo en el contenido, pero no incluyen el padding, el border o el margin. Por ejemplo, el elemento .box {width: 300px; border: 10px solid black; padding: 10px; } cuando sea interpretado por el navegador tendrá un width de 340px (resultado de la suma del border, el padding y el width).
padding-box
En este caso las propiedades widthheight incluyen en padding pero no incluyen el border y el margin.
border-box

El width y el height incluyen el padding y el border, pero no el margin. Volviendo al primer ejemplo, si usaramos border-box en el elemento .box {width: 300px; border: 10px solid black; padding: 10px; -moz-box-sizing: border-box; box-sizing: border-box; } tendrá un width de 300px después de ser interpretado por el navegador.

Sintaxis formal

content-box | border-box

Ejemplos

/* support Firefox, WebKit, Opera and IE8+ */

.example {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

Especificaciones

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

Compatibilidad con los navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 1.0 -webkit [1]
10.0
1.0 (1.7 o anterior)-moz[1]
29.0 (29.0)

8.0 [1]

7.0 3.0 (522)-webkit
5.1 (534.12)
padding-box Sin soporte 1.0 (1.0) Sin soporte Sin soporte Sin soporte
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico 2.1-webkit [1]
4.0
1.0 (1.0)-moz [1]
29.0 (29.0)
Mango 7.5 (Yes) (Yes)
padding-box Sin soporte 1.0 (1.0) Sin soporte Sin soporte Sin soporte

Notas

[1] box-sizing no aplica para el cálculo de la altura height window.getComputedStyle(), en Internet Explorer, en Firefox anterior 23, y en Chrome. Nota: En IE9's se puede usar la propiedad particular currentStyle y nos da un correcto rendereo del height.

También te podría interesar

Etiquetas y colaboradores del documento

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