Atributo box-sizing de CSS

Definición y uso

La propiedad box-sizing le permite definir de manera específica cómo un elemento en particular encaja en una área específica.

Por ejemplo, si necesita colocar dos cuadros con borde lado a lado, puede establecer box-sizing en "border-box". Esto permitirá que el navegador muestre cuadros con anchura y altura especificadas, y colocará los bordes y márgenes dentro del cuadro.

Véase también:

Tutorial de CSS3:Interfaz de usuario de CSS3

Manual de referencia de HTML DOM:Propiedad boxSizing

Ejemplo

Define dos cuadros adyacentes con borde:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Inténtalo tú mismo

Hay más ejemplos en la parte inferior de la página.

Sintaxis de CSS

box-sizing: content-box|border-box|inherit;

Valor del atributo

Valor Descripción
content-box

Esto es el comportamiento de anchura y altura especificado por CSS2.1.

El ancho y la altura se aplican por separado al cuadro de contenido del elemento.

Los márgenes internos y los bordes del elemento se dibujan fuera del ancho y la altura.
border-box

El ancho y la altura establecidos para el elemento determinan la caja del borde del elemento.

Es decir, cualquier margen interno y borde especificado para el elemento se dibujará dentro del ancho y la altura establecidos.

Para obtener el ancho y la altura del contenido, se restan los bordes y los márgenes de los anchos y alturas establecidos.
inherit Se especifica que la propiedad box-sizing debe heredar el valor del elemento padre.

Detalles técnicos

Valor predeterminado: content-box
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: object.style.boxSizing="border-box"

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad.

Los números con -webkit- o -moz- indican la primera versión con prefijo utilizada.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5