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

21 mayo, 2015 5:05 por

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í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:

Cajas de línea

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:

Padding horizontal

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

Padding vertical

Sin 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 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.

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

The following two tabs change content below.

jorgev

AMO Product Manager at Mozilla
Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.

Compartir artículo:

Empezar la discusión en foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa