Entendiendo el modelo de cajas de CSS para los elementos en línea

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:

2 cajas en líneaSi 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:

Cajas de líneaEl 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:

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

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

Padding vertical del borderSi 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.

Información de despliegueEn 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

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s