box-sizing

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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
Animatableno
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
The definition of 'box-sizing' in that specification.
Candidate Recommendation  

Compatibilidad con los navegadores

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

8.0 [1]

7.0 3.0 (522)-webkit
5.1 (534.12)
padding-box Not supported 1.0 (1.0) Not supported Not supported Not supported
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 Not supported 1.0 (1.0) Not supported Not supported Not supported

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: Derhks, Sebastianz, juandiegoles
 Última actualización por: Derhks,