Lunes, Noviembre 11, 2019

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

cssBoxModel.png

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-inline-boxes.png

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:

line-boxes.png

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:

1EkRCvp.png

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

1SfJUxa.png

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

1EkRBaR.png

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

Fuente: sinfallas

Compártelo. ¡Gracias!

 
Grupo Digital de Ayuda! Laboratorio Linux! - Linux para todos.

¿Quién está en línea?

Hay 337 invitados y ningún miembro en línea

Contador de Visitas

10166978
Hoy Hoy 2340
Ayer Ayer 2414
Esta semana Esta semana 2340
Este mes Este mes 31781
Total de Visitas Total de Visitas 10166978

Día con más
visitantes

11-04-2019 : 5783

Gracias por su visita