Como desarrollador frontend, comprender el modelo de caja CSS es decisivo para poder ofrecer diseños con píxeles perfectos. Profundicemos y analicemos cómo los elementos en línea y en bloque se comportan de manera diferente en el contexto de los dos tipos de modelo de caja: cuadro de contenido y cuadro de borde.

Lo básico: ¿Qué hay en la caja?

Antes de entrar en detalles, vale la pena recapitular qué es el modelo de caja. Cada elemento de su página es un cuadro (sí, incluso aquellos que en realidad no parecen tener forma cuadrada). Las cajas pueden estar dentro, conteniendo y/o al lado de otras cajas.

El modelo de caja aplica para todos ellos y consta de:

• Cuadro de contenido: Un elemento HTML o pseudoelemento CSS en el que se encuentra su contenido real: texto, imágenes, lo que sea.
• Relleno: El espacio entre tu contenido y el borde.
• Borde: La línea que rodea el relleno y el contenido.
• Margen: El espacio fuera del borde que aleja otros elementos.

Por lo tanto, casi todos los elementos HTML dentro de

(incluido) y todos los pseudoelementos CSS son un cuadro. Las "paredes" de ese cuadro son su borde y se les puede dar un grosor (o ancho). Entre ese contenido y las paredes de ese cuadro tiene relleno. Entre esas paredes y otros cuadros, tiene margen.

Diferencias clave entre elementos en línea y en bloque

Es fundamental comprender las diferencias clave en cómo el modelo de caja afecta los elementos en línea frente a los de bloque:

1. Ancho: Los elementos del bloque se expanden para llenar su contenedor de forma predeterminada. ¿Elementos en línea? Ocupan el espacio suficiente para su contenido.

2. Altura: Para elementos de bloque, el relleno, el borde y el margen aumentarán la altura. Los elementos en línea permanecen dentro de la altura de la línea, independientemente del relleno vertical o los bordes.

3. Impacto en el diseño: Los elementos del bloque influyen tanto en el diseño horizontal como en el vertical. Los elementos en línea tienen que ver con el flujo horizontal, con un impacto mínimo en el espaciado vertical.

4. Colapso de márgenes: El colapso de márgenes es un comportamiento específico de los elementos de bloque, donde los márgenes verticales adyacentes pueden fusionarse (por lo que un margen inferior:20px en un elemento puede colapsar en un margen superior: 20px en un elemento siguiente, creando un margen de 20px). Los elementos en línea no entran en este juego.

Ahora que conocemos los componentes del modelo de caja y la diferencia entre elementos en línea y en bloque, veamos cómo los cuadros de contenido se ven afectados por la propiedad box-sizing según si son un elemento en línea o en bloque.

Tamaño de caja: cuadro de contenido versus cuadro de borde

La propiedad box-sizing controla cómo se calculan el ancho y el alto de un elemento, y puede afectar significativamente el diseño.

1. cuadro de contenido con elementos en línea

Cuando se cambia el tamaño del cuadro: el cuadro de contenido se aplica a un elemento en línea:

• Ancho y Alto: El ancho está determinado únicamente por el contenido. El relleno, el borde y el margen se agregan encima de este ancho.
• Impacto en el diseño: Dado que los elementos en línea no interrumpen el flujo del texto, el ancho del elemento es tan ancho como el contenido. El relleno vertical y los bordes están presentes visualmente pero no afectan la altura de la línea circundante.

2. cuadro de contenido con elementos de bloque

Cuando se cambia el tamaño del cuadro: el cuadro de contenido se aplica a un elemento de bloque:

• Ancho y alto: El ancho o alto especificado se aplica solo al área de contenido. Fuera de esto se agregan relleno y borde, lo que aumenta el tamaño general del elemento.
• Impacto en el diseño: Los elementos del bloque se expanden hasta el ancho completo de su contenedor de forma predeterminada, a menos que se especifique lo contrario. El relleno y los bordes aumentan el tamaño del elemento, alejando los elementos adyacentes.

3. cuadro de borde con elementos en línea

Cuando se cambia el tamaño del cuadro: el cuadro de borde se aplica a un elemento en línea:

• Ancho y Alto: El ancho incluye el contenido, el relleno y el borde. El área de contenido se reduce para acomodar el relleno y los bordes dentro del ancho especificado.
• Impacto en el diseño: El ancho del elemento todavía está determinado por el contenido, pero ahora el relleno y los bordes se incluyen dentro de este ancho. El relleno vertical y los bordes permanecen visualmente presentes pero no alteran la altura de la línea.

4. cuadro de borde con elementos de bloque

Cuando se cambia el tamaño del cuadro: el cuadro de borde se aplica a un elemento de bloque:

• Ancho y alto: El ancho y alto especificados incluyen el contenido, el relleno y el borde. Esto significa que el tamaño total del elemento se mantiene consistente con las dimensiones especificadas, sin importar cuánto relleno o borde agregue.
• Impacto en el diseño: El tamaño del elemento de bloque es más predecible porque el relleno y el borde están contenidos dentro del ancho especificado. Esto hace que el diseño del diseño sea más fácil de gestionar, especialmente al alinear elementos uno al lado del otro.

Vale la pena señalar que, si bien el cuadro de contenido es el predeterminado, se considera que el cuadro de borde es más intuitivo y proporciona el mayor grado de control.

---

El modelo de caja CSS no es solo un concepto poderoso: es una herramienta fundamental en su arsenal de desarrollo frontend. Al comprender cómo el tamaño de la caja afecta de manera diferente a los elementos en línea y en bloque, puede comenzar a crear diseños impecables que sean nítidos y funcionales sin la molestia de solucionar problemas de diseños que se comportan mal.

Si disfrutaste esta descarga en Box Model, ¡desplaza el cursor sobre el cuadro en forma de corazón en la parte superior izquierda y muestra todo tu amor a esta publicación!