Propiedad CSS box-sizing
La propiedad box-sizing define el cálculo del ancho y alto de un elemento, si incluyen relleno y bordes.
La propiedad box-sizing es una de las propiedades de CSS3.
El ancho y el alto de un elemento, por defecto, se calculan de la siguiente manera:
- ancho + relleno + borde = ancho real de un elemento
- alto + relleno + borde = alto real de un elemento
Por lo tanto, cuando se define el ancho y el alto de un elemento, este suele aparecer más grande de lo establecido (porque el borde y el relleno del elemento se suman al ancho y alto especificados).
| Valor inicial | content-box |
|---|---|
| Se aplica a | Todos los elementos que aceptan ancho y alto. |
| Heredable | 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;En este ejemplo se muestran dos <div> elementos con el mismo ancho y alto especificados:
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
Si box-sizing se define como content-box, el ancho total será mayor que el ancho definido del div. Y si se define box-sizing: border-box, el relleno y el borde se incluirán en el ancho y el alto.
Las propiedades box-sizing y border-box se utilizan para maquetar elementos. Este método es útil porque facilita el trabajo con los tamaños de los elementos al eliminar una serie de inconvenientes que pueden surgir al maquetar el contenido.
Ejemplo de uso de la propiedad box-sizing para crear dos cajas con borde definidas lado a lado:
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>Valores
| Valor | Descripción |
|---|---|
| content-box | Las propiedades de ancho y alto incluyen el contenido, pero no incluyen el relleno, el borde o el margen. Es el valor predeterminado. |
| border-box | Las propiedades de ancho y alto incluyen el contenido, el relleno y el borde, pero no incluyen el margen. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad CSS 'box-sizing'?