Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Sergio Carlavilla Delgado.

En una página web, todo elemento se representa como una caja rectangular. El modelo de cajas describe cómo el content (contenido), padding (relleno), border (borde) y margin (margen) del elemento determinan el espacio ocupado por el elemento y su relación con otros elementos de la página.

Dependiendo de la propiedad display del elemento, su caja puede ser de dos tipos: una caja de bloque o una caja en línea. El modelo de cajas se aplica de forma diferente a estos dos tipos. En este artículo veremos cómo el modelo de cajas se aplica para las cajas en línea, y como una nueva característica en las herramientas de desarrollo de Firefox te puede ayudar a visualizar el modelo de cajas para los elementos en línea.

Cajas en línea y cajas de línea

Las cajas en línea se extienden horizontalmente en una caja llamada caja de línea:

Si no hay suficiente espacio horizontal para poner todos los elementos en una sola línea, se creará otra caja de línea bajo la primera. Un único elemento en línea puede ser dividido en varias líneas:

El modelo de cajas para cajas en línea

Cuando una caja en línea está dividida en más de una línea, lógicamente todavía es una única caja. Esto significa que  todo padding, border o margin horizontal solo es aplicado al inicio de la primera línea ocupada por la caja y el fin de la última línea.

Por ejemplo, en la imagen de abajo,  el span resaltado está dividido en dos líneas. Su padding horizontal no se aplica al final de la primera línea o al comienzo de la segunda línea:

Además, cualquier padding, border o margin aplicado a un elemento no va a alejar los elementos por encima o por debajo:

Sin embargo, ten en cuenta que el padding y el border vertical todavía se aplican, y el padding todavía aleja el border:

Si necesitas ajustar la distancia entre las líneas, puedes usar line-height.

Inspeccionando elementos en línea con las herramientas de desarrollo

Cuando depuramos errores en el despliegue (layout) de la página, es importante disponer de herramientas que te den una evaluación completa. Una de estas herramientas es el resaltador, el cual todos los navegadores incluyen en sus herramientas de desarrollo. Puedes usarlo para seleccionar elementos para una inspección más detallada, pero también te proporcionará información acerca del despliegue.

En el ejemplo de arriba, el resaltador de Firefox 39 es usado para resaltar un elemento en línea dividido en varias líneas.

El resaltador muestra guías que te ayudarán a alinear los elementos, da las dimensiones completas del nodo y muestra una superposición que enseña del modelo de cajas.

Desde Firefox 39 en adelante, la superposición del modelo de cajas para los elementos en línea divididos muestra individualmente las líneas ocupadas por el elemento. En este ejemplo se muestra la región de contenido en azul claro y está dividido en cuatro líneas. Un padding derecho también está definido para el nodo, y el resaltador muestra la región del padding en morado.

Destacar cada caja de línea individualmente es importante para comprender cómo el modelo de cajas es aplicado para los elementos en línea, y te ayuda a comprobar el espacio entre las líneas y la alineación vertical para las cajas en línea.

Publicado originalmente en: Mozilla Hispano