Propiedad CSS box-sizing
La propiedad box-sizing define el cálculo del ancho y alto de un elemento. Ver ejemplos y probarlos.
La propiedad box-sizing controla cómo se calculan el width y el height de un elemento — concretamente, si el padding y el border se cuentan dentro de esas dimensiones o se añaden por encima de ellas. Es una de las propiedades de CSS3.
Esta página explica la diferencia entre los dos modelos de caja (content-box y border-box), por qué border-box es el valor predeterminado moderno para la mayoría de los diseños y cómo aplicarlo a toda una página.
Cómo el modelo de caja afecta al tamaño
Por defecto (content-box), width y height establecen únicamente el tamaño del área de contenido. El padding y el border se añaden encima, por lo que la caja renderizada es más grande que el valor que escribiste:
- ancho + padding + border = ancho renderizado del elemento
- alto + padding + border = alto renderizado del elemento
Por ejemplo, una caja con width: 400px, padding: 50px en cada lado y un border de 5px en cada lado ocupa en realidad 400 + 100 + 10 = 510px de espacio horizontal. Esta es una fuente frecuente de errores de diseño: dos columnas con 50% de ancho y cualquier padding o border no cabrán una al lado de la otra, porque cada una acaba siendo más ancha que la mitad del contenedor.
Con box-sizing: border-box, el padding y el border se incluyen dentro del ancho y alto declarados. Un elemento con width: 50% permanece exactamente en la mitad del ancho del contenedor sin importar cuánto padding o border se añada — por eso la mayoría de hojas de estilo reinician todos los elementos a border-box.
| Valor inicial | content-box |
|---|---|
| Se aplica a | Todos los elementos que aceptan ancho y alto. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.boxSizing = "border-box"; |
Sintaxis
Sintaxis de la propiedad CSS box-sizing
box-sizing: content-box | border-box | initial | inherit;El siguiente ejemplo muestra dos elementos <div> con declaraciones idénticas de width, height, padding y border — solo difieren en su valor de box-sizing, lo que es suficiente para que se rendericen con tamaños diferentes:
Ejemplo de la propiedad box-sizing
Ejemplo de la propiedad CSS box-sizing con los valores content-box y border-box
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
box-sizing: content-box;
width: 400px;
height: 50px;
padding: 50px;
border: 5px double #1c87c9;
}
.div2 {
box-sizing: border-box;
width: 400px;
height: 50px;
padding: 50px;
border: 5px dashed #8ebf42;
}
</style>
</head>
<body>
<h2>Box-sizing Example</h2>
<hr />
<h3>box-sizing: content-box (default):</h3>
<div class="div1">The width for this div is set as 400px. Thus, the full width is 400px + 10px (left and right border) + 100px (left and right padding) = 510px.</div>
<br />
<h3>box-sizing: border-box:</h3>
<div class="div2">The width and height apply to all parts of the div element: The full width is 400px.</div>
</body>
</html>Resultado
Con content-box, la caja renderizada es más ancha que el width declarado porque el padding y el border se suman a él. Con border-box, el padding y el border se absorben dentro del width y el height declarados, por lo que la caja mantiene exactamente el tamaño especificado.
border-box es el valor al que recurrirás con más frecuencia al construir diseños. Hace que los tamaños de los elementos sean predecibles y elimina toda una clase de problemas — puedes añadir padding o border sin recalcular los anchos.
Ejemplo de dos cajas con borde colocadas una al lado de la otra
Aquí border-box permite que dos cajas flotantes con un ancho del 50% queden una al lado de la otra aunque cada una tenga su propio border y padding. Con el content-box predeterminado, los bordes y el padding harían que el ancho combinado superara el 100% y forzarían la segunda caja a una nueva línea.
Ejemplo de la propiedad CSS box-sizing con el valor border-box
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 2px double #1c87c9;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 3px solid #ccc;
float: left;
padding: 3px;
}
</style>
</head>
<body>
<h2>Box-sizing Example</h2>
<p>Here you can see two bordered boxes defined side by side.</p>
<div class="container">
<div class="box">Left part</div>
<div class="box">Right part</div>
<div style="clear:both;"></div>
</div>
</body>
</html>Aplicar border-box a toda la página
En lugar de establecer box-sizing en elementos individuales, la mayoría de los proyectos lo aplican una vez a todos los elementos usando el selector universal. Este es el reset de CSS más común en las hojas de estilo modernas:
*,
*::before,
*::after {
box-sizing: border-box;
}Los selectores *::before y *::after garantizan que las cajas de contenido generado sigan la misma regla. Tras este reset, width y height significan "el tamaño total incluyendo padding y border" en todos lados, que es lo que la mayoría de las personas esperan intuitivamente.
Compatibilidad con navegadores
box-sizing es compatible con todos los navegadores modernos, incluidas las versiones actuales de Chrome, Firefox, Safari y Edge. Es una característica estable de CSS3 y no necesita prefijos de proveedor para los navegadores de hoy.
Valores
| Valor | Descripción |
|---|---|
| content-box | Las propiedades width y height incluyen el contenido, pero no incluyen el padding, border ni margin. Es el valor predeterminado. |
| border-box | Las propiedades width y height incluyen el content, el padding y el border, pero no incluyen el margin. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |