En este artículo vamos a explicar la propiedad box-sizing de CSS y cómo puede ayudarnos a diseñar y ajustar nuestros elementos HTML. Cuando trabajamos en diseño web, entender cómo se calcula el tamaño de los elementos HTML con el modelo de caja CSS es fundamental.
La propiedad box-sizing de CSS nos proporciona un control preciso sobre este comportamiento, permitiéndonos especificar si el tamaño de un elemento incluirá el relleno y el borde, o si solo se calculará su tamaño basándose en el contenido. En este artículo, vamos a explicar en detalle la propiedad box-sizing, sus valores y cómo podemos utilizarla para crear diseños más predecibles y flexibles.
¿Qué es la Propiedad box-sizing de CSS?
La propiedad box-sizing de CSS está directamente relacionada con el modelo de caja de CSS y determina cómo se calcula el tamaño total de un elemento, incluyendo su contenido, relleno y borde. Puede tener dos valores principales: content-box y border-box.
content-box
Este es el valor predeterminado de la propiedad box-sizing de CSS. Cuando se establece en content-box, el tamaño total de un elemento se calcula exclusivamente basado en el contenido, excluyendo el relleno y el borde. Supongamos que tenemos un elemento <div> con un ancho de 200px y un relleno de 20px en cada lado.
.element {
width: 200px;
padding: 0 20px;
box-sizing: content-box;
}
<div class="element"></div>El tamaño total del <div> se calculará basado únicamente en el contenido, lo que significa que el ancho real del elemento será de 240px (200px de ancho más 20px de relleno en cada lado).
border-box
Con el valor border-box, el tamaño total de un elemento se calcula incluyendo tanto el contenido como el relleno y el borde. Esto significa que el tamaño especificado para el elemento incluirá también el espacio ocupado por el relleno y el borde.
.element {
width: 200px;
padding: 0 20px;
border: 2px solid black;
box-sizing: border-box;
}
<div class="element"></div>Ahora, con la propiedad box-sizing a border-box, el tamaño total del elemento se calculará incluyendo el contenido, el relleno y el borde. En este caso, el ancho total del elemento será de 200px, ya que el relleno y el borde se incluyen en ese tamaño. El contenido principal (width) será de 156px (200px de ancho menos 20px de relleno y 2px de borde en cada lado).
Resumen de la propiedad box-sizing de CSS
La propiedad box-sizing en CSS nos brinda un control preciso sobre cómo se calcula el tamaño total de un elemento, lo que nos permite diseñar de manera más eficiente y predecible. Una de las prácticas más habituales al diseñar una web consiste en definir esta propiedad al inicio de los estilos CSS.
* {
box-sizing: border-box;
}Con esto conseguimos un comportamiento homogéneo para todos nuestros elementos HTML y podemos pensar en ellos como cajas de tamaño fijo, independientemente de si añadimos bordes o rellenos. Esto permite simplicar cálculos y dejar al navegador web que haga los ajustes internos de cada caja, mientras el contenido fluye y se ajusta en su interior. Si en algún momento necesitamos especificar un tamaño específico a nuestro contenido, siempre podemos especificarle el valor content-box a un elemento concreto.
Comprender estos valores y su comportamiento nos permite crear diseños coherentes y flexibles en nuestros proyectos web. Experimenta con estos ejemplos y utiliza la propiedad box-sizing para mejorar tus diseños web.
¡ Espero que este artículo sea de vuestro interés !