La Propiedad BOX-SIZING

La propiedad box-sizing en CSS es fundamental para entender cómo se calcula el tamaño total de un elemento en la página web.

 

La propiedad box-sizing en CSS es fundamental para entender cómo se calcula el tamaño total de un elemento en la página web. Controla el modelo de caja CSS utilizado para determinar el ancho y el alto de un elemento. Comprender box-sizing es crucial para crear diseños web predecibles y responsivos.

El Modelo de Caja CSS Predeterminado (content-box)

Por defecto, los navegadores utilizan el modelo de caja llamado content-box. En este modelo:

  • Las propiedades width y height se aplican solo al contenido del elemento.
  • El padding y el border del elemento se añaden al width y al height definidos.

Esto puede llevar a cálculos inesperados. Por ejemplo, si defines un elemento con width: 100px, padding: 10px y border: 5px, el ancho total real del elemento será de 100px (contenido) + 10px (padding izquierdo) + 10px (padding derecho) + 5px (borde izquierdo) + 5px (borde derecho) = 130px.

El Modelo de Caja Alternativo (border-box)

La propiedad box-sizing nos permite cambiar este comportamiento al modelo border-box. En este modelo:

  • Las propiedades width y height incluyen el contenido, el padding y el borde.
  • El tamaño del contenido se ajusta para acomodar el padding y el border dentro del ancho y alto especificados.

Usar border-box hace que sea mucho más intuitivo trabajar con las dimensiones de los elementos, especialmente cuando se trata de diseños responsivos o cuando necesitas que un elemento ocupe un cierto porcentaje del espacio disponible.

Sintaxis Básica

La sintaxis básica para usar la propiedad box-sizing es la siguiente:

CSS
 
selector {
  box-sizing: <valor>;
}

Donde <valor> puede ser uno de los siguientes:

Valores de la Propiedad box-sizing

  • content-box: Este es el valor inicial (predeterminado). El width y el height se aplican al contenido del elemento. El padding y el border se añaden al exterior de la caja.

  • border-box: El width y el height incluyen el padding y el border, pero no el margin. El tamaño del contenido se calcula automáticamente para ajustarse dentro de estas dimensiones.

Ejemplos Prácticos

Veamos algunos ejemplos para ilustrar la diferencia entre content-box y border-box:

Ejemplo 1: content-box (predeterminado)

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .caja-content-box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid blue;
    background-color: lightblue;
  }
</style>
</head>
<body>

  <div class="caja-content-box">Este es un elemento con content-box.</div>

</body>
</html>

En este ejemplo, el ancho total de la caja será 200px (width) + 20px (padding izquierdo) + 20px (padding derecho) + 5px (borde izquierdo) + 5px (borde derecho) = 250px. La altura total será 100px (height) + 20px (padding superior) + 20px (padding inferior) + 5px (borde superior) + 5px (borde inferior) = 150px.

Ejemplo 2: border-box

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .caja-border-box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid green;
    background-color: lightgreen;
    box-sizing: border-box; /* Aplicamos el modelo border-box */
  }
</style>
</head>
<body>

  <div class="caja-border-box">Este es un elemento con border-box.</div>

</body>
</html>

En este caso, el ancho total de la caja será exactamente 200px, y la altura total será exactamente 100px. El espacio disponible para el contenido se reducirá para acomodar el padding y el borde.

¿Por qué usar border-box?

Usar box-sizing: border-box; generalmente simplifica el diseño web por las siguientes razones:

  • Previsibilidad: Es más fácil razonar sobre el tamaño real de un elemento, ya que el width y el height definidos son las dimensiones totales que el elemento ocupará.
  • Diseños responsivos: Al trabajar con porcentajes para el ancho (por ejemplo, width: 50%), los elementos se comportarán de manera más intuitiva, ya que el padding y el borde no harán que se desborden de su contenedor.
  • Trabajar con frameworks CSS: Muchos frameworks CSS (como Bootstrap y Tailwind CSS) utilizan box-sizing: border-box; como valor predeterminado para todos los elementos para facilitar la creación de diseños consistentes.

Cómo aplicar border-box globalmente

Una práctica recomendada es aplicar box-sizing: border-box; a todos los elementos de tu página. Puedes hacerlo utilizando el selector universal (*) y los pseudo-elementos ::before y ::after:

CSS
 
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Esto asegura que todos los elementos, incluyendo los pseudo-elementos, utilicen el modelo de caja border-box. La primera regla establece box-sizing en border-box para el elemento html, y la segunda regla hace que todos los demás elementos hereden este valor.

Ejemplo de Diseño Responsivo con border-box

Imagina que quieres crear dos columnas que ocupen el 50% del ancho de su contenedor, con un poco de padding entre ellas.

Con content-box:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    display: flex;
  }

  .columna {
    width: 50%;
    padding: 10px;
    background-color: #eee;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="columna">Columna 1</div>
    <div class="columna">Columna 2</div>
  </div>

</body>
</html>

En este caso, debido al padding y al borde, cada columna ocupará más del 50% del ancho, lo que podría causar problemas de diseño.

Con border-box:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

  .contenedor {
    display: flex;
  }

  .columna {
    width: 50%;
    padding: 10px;
    background-color: #eee;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="columna">Columna 1</div>
    <div class="columna">Columna 2</div>
  </div>

</body>
</html>

Al aplicar box-sizing: border-box;, cada columna ocupará exactamente el 50% del ancho de su contenedor, y el padding y el borde se incluirán dentro de ese 50%, facilitando la creación de un diseño de dos columnas sin desbordamientos.

Compatibilidad del Navegador

La propiedad box-sizing tiene una excelente compatibilidad con todos los navegadores modernos.

Conclusión

La propiedad box-sizing es una herramienta poderosa que te permite controlar cómo se calculan las dimensiones de tus elementos en CSS. Utilizar el modelo border-box generalmente conduce a un flujo de trabajo más intuitivo y facilita la creación de diseños web consistentes y responsivos. Se recomienda adoptar la práctica de aplicar box-sizing: border-box; globalmente en tus proyectos CSS.