# Sobre la propiedad CSS box-sizing
La importancia de la propiedad CSS box-sizing reside en que determina la manera en la que se calculan el ancho y alto de un elemento.
De manera predeterminada, el ancho y alto (también ancho y alto máximos) que indiquemos para un elemento sólo afectarán a su contenido, con lo que su tamaño total se verá incrementado por los valores del padding (relleno) y border (límite del elemento).
Dicho comportamiento se deriva del valor por defecto de la propiedad CSS box-sizing que está establecido en content-box.
<div class="box-sizing-default">
box-sizing default
</div>
<div class="box-sizing-default box-sizing-default--styled">
styled box-sizing default
</div>
.box-sizing-default {
align-items: center;
display: flex;
height: 100px;
justify-content: center;
width: 200px;
background: #ffff99;
color: #333;
}
.box-sizing-default--styled {
border: 10px solid;
padding: 20px;
}
# box-sizing: border-box
Con el uso del valor border-box de la propiedad box-sizing, tanto el padding como border de nuestro elemento estarán incluidos en el ancho y alto del mismo, con lo que nos garantizaremos que el tamaño del elemento se ajuste a lo que esperamos, aunque alteremos su relleno o límites.
<div class="box-sizing-border-box">
box-sizing border-box
</div>
<div class="box-sizing-border-box box-sizing-border-box--styled">
styled box-sizing border-box
</div>
.box-sizing-border-box {
align-items: center;
box-sizing: border-box;
display: flex;
height: 100px;
justify-content: center;
width: 200px;
background: #ffff99;
color: #333;
}
.box-sizing-border-box--styled {
border: 10px solid;
padding: 20px;
}