Tamaño de caja
Cuando definimos un tamaño a un elemento y, a continuación, le añadimos un margen interior (padding), un borde (border) y un margen exterior (margin), su tamaño se va a ver modificado con respecto al tamaño original. El comportamiento sobre cómo afectan estas propiedades (padding, border y margin) al tamaño final de la caja, se pueden configurar con la propiedad box-sizing.
Por defecto, cuando se define un ancho o alto a un elemento (con las propiedades width o height, respectivamente), estamos definiendo el ancho o alto del contenido de un elemento.
Supogamos el siguiente ejemplo:
.hijo {
box-sizing: content-box;
width: 100%;
}
En el ejemplo anterior, el hijo tiene un ancho del 100%, por lo tanto, ocupará el 100% del ancho del padre. El padre, al tener un ancho de 200 píxeles (sin contar el borde), el hijo tendrá un ancho de 200 píxeles.
Ahora, vamos a añadir un borde y margen interno al hijo:
.hijo {
box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}
El resultado sería el siguiente:
Vemos que el child container desborda el parent container, ya que conserva el ancho que tenía anteriormente (el 100% de ancho es respecto al contenido) y añade 10 píxeles de borde y 5 píxeles de margen interno. Por lo tanto, el ancho total sería del 100% + 10*2 + 5*2, es decir, se aumentan 30 píxeles de ancho, de ahí ese desbordamiento.
Si queremos cambiar esta funcionalidad y que, una vez añadido el borde y el margen interior, encaje en el contenedor padre, debemos modificar el valor de la propiedade box-sizing a border-box:
.hijo {
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}
El resultado sería el siguiente:
