10 Detalles del modelo de formato visual

Contenidos

10.1 Definición de "bloque de contención"

La posición y tamaño de la(s) caja(s) de un elemento a veces son computadas en relación a cierto rectángulo, llamado el bloque de contención del elemento. El bloque de contención de un elemento es definido del siguiente modo:

  1. El bloque de contención (llamado el bloque de contención inicial) en el cuál reside el elemento raíz es escogido por la aplicación del usuario.
  2. Para los demás elementos, a menos que el elemento esté posicionado absolutamente, el bloque de contención está formado por el borde del contenido de la caja a nivel de bloque que es el antepasado más cercano.
  3. Si el elemento tiene 'position: fixed', el bloque de contención es establecido por el acceso visual.
  4. Si el elemento tiene 'position: absolute', el bloque de contención es establecido por el antepasado más cercano con una propiedad 'position' distinta a 'static', del siguiente modo:
    1. En el caso de que el antepasado sea a nivel de bloque, el bloque de contención estará formado por el borde del relleno del antepasado.
    2. En el caso de que el antepasado sea a nivel de línea, el bloque de contención dependerá de la propiedad 'direction' del antepasado:
      1. Si 'direction' es 'ltr', la parte superior izquierda del bloque de contención es la parte superior izquierda del borde del contenido de la primer caja generada por el antepasado, y la parte inferior derecha es la inferior derecha del borde del contenido de la última caja del antepasado.
      2. Si 'direction' es 'rtl', la parte superior derecha del bloque de contención es la parte superior derecha del borde del contenido de la primer caja generada por el antepasado, y la parte inferior izquierda es la inferior izquierda del borde del contenido de la última caja del antepasado.

    Si no hay tal antepasado, el borde de la caja del contenido del elemento raíz establece el bloque de contención.

Ejemplo(s):

Sin posicionamiento, los bloques de contención (B.C.) en el siguiente documento:

<HTML>
   <HEAD>
      <TITLE>Ilustración de bloques de contención</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">Este es texto en el primer párrafo...</P>
      <P id="p2">Este es texto <EM id="em1"> en el 
      <STRONG id="strong1">segundo</STRONG> párrafo.</EM></P>
      </DIV>
   </BODY>
</HTML>

son establecidos como sigue:

Para la caja generada por B.C. es establecido por
bodyB.C. inicial (depende de la AU)
div1body
p1div1
p2div1
em1p2
strong1p2

Si posicionamos "div1":

   #div1 { position: absolute; left: 50px; top: 50px }

su bloque de contención no es más "body"; se convierte en el bloque de contención inicial (porque no hay otras cajas antepasadas posicionadas).

Si también posicionamos "em1":

   #div1 { position: absolute; left: 50px; top: 50px }
   #em1  { position: absolute; left: 100px; top: 100px }

la tabla de bloques de contención se convierte en:

Para la caja generada por B.C. es establecido por
bodyB.C. inicial
div1B.C. inicial
p1div1
p2div1
em1div1
strong1em1

Posicionando "em1", su bloque de contención se convierte en la caja del antepasado posicionado más cercano (es decir, lo generado por "div1").

10.2 Ancho del contenido: la propiedad 'width'

'width'
Valor:  <medida> | <porcentaje> | auto | inherit
Inicial:  auto
Se aplica a:  todos los elementos excepto los elementos de línea no reemplazados, las filas de las tablas y los grupos de filas
Se hereda:  no
Porcentajes:  referidos al ancho del bloque de contención
Medios:  visuales

Esta propiedad especifica el ancho del contenido de las cajas generadas por elementos a nivel de bloque y reemplazados.

Esta propiedad no se aplica a los elementos a nivel de línea no reemplazados. El ancho de las cajas de los elementos de línea no reemplazados es el de su contenido generado (antes de cualquier desplazamiento relativo de los hijos). Recuerde que esas cajas a nivel de línea fluyen en cajas de línea. El ancho de las cajas de línea está dado por su bloque de contención, pero puede ser acortado por la presencia de flotantes.

El ancho de la caja de un elemento reemplazado es intrínseco y puede ser modificado por la aplicación del usuario si el valor de esta propiedad es distinto a 'auto'.

Los valores tienen los siguientes significados:

<medida>
Especifica un ancho fijo.
<porcentaje>
Especifica un ancho según un porcentaje. El porcentaje es calculado con respecto al ancho del Specifies a percentage width. The percentage is bloque de contención de la caja generada.
auto
El ancho depende de los valores de otras propiedadess. Ver las secciones de abajo.

Los valores negativos para 'width' son ilegítimos.

Ejemplo(s):

Por ejemplo, la siguiente regla fija el ancho del contenido de los párrafos en 100 pixels:

P { width: 100px }

10.3 Computando anchos y márgenes

Los valores computados de las propiedades 'width', 'margin-left', 'margin-right', 'left' y 'right' de un elemento dependen del tipo de caja generada y entre sí. En principio, los valores computados son los mismos valores especificados, con 'auto' reemplazado por algún valor apropiado, pero existen excepciones. Las siguientes situaciones necesitan distinguirse:

  1. elementos no reemplazados, de línea
  2. elementos reemplazados, de línea
  3. elementos no reemplazados en flujo normal, a nivel de bloque
  4. elementos reemplazados en flujo normal, a nivel de bloque
  5. elementos no reemplazados, flotantes
  6. elementos reemplazados, flotantes
  7. elementos no reemplazados, posicionados absolutamente
  8. elementos reemplazados, posicionados absolutamente

Los puntos 1-6 incluyen posicionamiento relativo.

10.3.1 Elementos no reemplazados, de línea

La propiedad 'width' no se aplica. Un valor 'auto' especificado para 'left', 'right', 'margin-left' o 'margin-right' se convierte en un valor computado de '0'.

10.3.2 Elementos reemplazados, de línea

Un valor 'auto' especificado para 'left', 'right', 'margin-left' o 'margin-right' se convierte en un valor computado de '0'. Un valor 'auto' especificado para 'width' da el ancho intrínseco del elemento como valor computado.

10.3.3 Elementos no reemplazados en flujo normal, a nivel de bloque

Si 'left' o 'right' es dado como 'auto', su valor computado es 0. Las siguientes exigencias deben mantenerse entre las propiedades:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ancho delbloque de contención

(Si el estilo de borde es 'none', usa '0' como ancho de borde.) Si todos los anteriores tiene un valor especificado distinto a 'auto', se dice que los valores están "sobre-exigidos" y uno de los valores computados tendrá que ser diferente de su valor especificado. Si la propiedad 'direction' tiene el valor 'ltr', el valor especificado de 'margin-right' es ignorado y el valor es computado de modo que la igualdad resulte verdadera. Si el valor de 'direction' es 'rtl', esto a su vez sucede con 'margin-left'.

Si hay exactamente un valor especificado como 'auto', su valor computado proviene de la igualdad.

Si 'width' es puesto como 'auto', cualquier otro valor 'auto' se convierte en '0' y 'width' proviene de la igualdad resultante.

Si ambos, 'margin-left' y 'margin-right' son 'auto', sus valores computados son iguales.

10.3.4 Elementos reemplazados en flujo normal, a nivel de bloque

Si 'left' o 'right' es 'auto', su valor computado es 0. Si 'width' es especificado como 'auto', su valor es el ancho intrínseco del elemento. Si uno de los márgenes es 'auto', su valor computado está dado por las exigencias de más arriba. Además, si ambos márgenes son 'auto', sus valores computados son iguales.

10.3.5 Elementos no reemplazados, flotantes

Si 'left', 'right', 'width', 'margin-left' o 'margin-right' es especificado como 'auto', su valor computado es '0'.

10.3.6 Elementos reemplazados, flotantes

Si 'left', 'right', 'margin-left' o 'margin-right' es especificado como 'auto', su valor computado es '0'. Si 'width' es 'auto', su valor es el ancho intrínseco del elemento.

10.3.7 Elementos no reemplazados, posicionados absolutamente

La exigencia que determina los valores computados de estos elementos es:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ancho del bloque de contención

(Si el estilo de borde es 'none', se usa '0' como ancho de borde.) El cumplimiento de esta exigencia se alcanza a través de un número de sustituciones en el siguiente orden:

  1. Si 'left' tiene el valor 'auto' mientras que 'direction' es 'ltr', se reemplaza 'auto' con la distancia desde el borde izquierdo del bloque de contención hasta el margen izquierdo de una hipotética caja que sería la primer caja del elemento si su propiedad 'position' hubiera sido 'static'. (Pero en vez de computar realmente esa caja, las aplicaciones del usuario son libres de suponer su probable posición.) El valor es negativo si la hipotética caja está a la izquierda del bloque de contención.
  2. Si 'right' tiene el valor 'auto' mientras que 'direction' es 'rtl', se reemplaza 'auto' con la distancia desde el borde derecho del bloque de contención hasta el borde del margen derecho de la misma hipotética caja de arriba. El valor es positivo si la hipotética caja está a la izquierda del borde del bloque de contención.
  3. Si 'width' es 'auto', se reemplaza cualquier 'auto' que reste para 'left' o 'right' con '0'.
  4. Si 'left', 'right' o 'width' es (también) 'auto', se reemplaza cualquier 'auto' en 'margin-left' o 'margin-right' con '0'.
  5. Si en este punto ambos, 'margin-left' y 'margin-right' son también 'auto', se resuelve la ecuación bajo la exigencia extra de que los dos márgenes deben tener valores iguales.
  6. Si en este punto queda un sólo 'auto', se resuelve la ecuación para ese valor.
  7. Si en este punto los valores están sobre-exigidos, se ignora el valor para 'left' (en el caso de que 'direction' sea 'rtl') o 'right' (en el caso de que 'direction' sea 'ltr') y se resuelve ese valor.

10.3.8 Elementos reemplazados, posicionados absolutamente

Esta situación es similar a la previa, excepto que el elemento tiene un ancho intrínseco. La secuencia de sustituciones es ahora:

  1. Si 'width' es 'auto', lo sustituye el ancho intrínseco del elemento.
  2. Si 'left' tiene el valor 'auto' mientras que 'direction' es 'ltr', se reemplaza 'auto' con la distancia desde el borde izquierdo del bloque de contención hasta el borde del margen izquierdo de una hipotética caja que sería la primer caja del elemento si su propiedad 'position' hubiera sido 'static'. (Pero en vez de computar realmente esa caja, las aplicaciones del usuario son libres de suponer su probable posición.) El valor es negativo si la hipotética caja está a la izquierda del bloque de contención.
  3. Si 'right' tiene el valor 'auto' mientras que 'direction' es 'rtl', se reemplaza 'auto' con la distancia desde el borde derecho del bloque de contención hasta el borde del margen derecho de la misma hipotética caja de arriba. El valor es positivo si la hipotética caja está a la izquierda del borde del bloque de contención.
  4. Si 'left' o 'right' es 'auto', se reemplaza cualquier 'auto' para 'margin-left' o 'margin-right' con '0'.
  5. Si en este punto ambos, 'margin-left' y 'margin-right' son también 'auto', se resuelve la ecuación bajo la exigencia extra de que los dos márgenes deben tener valores iguales.
  6. Si en este punto queda un sólo 'auto', se resuelve la ecuación para ese valor.
  7. Si en este punto los valores están sobre-exigidos, se ignora el valor para 'left' (en el caso de que 'direction' sea 'rtl') o 'right' (en el caso de que 'direction' sea 'ltr') y se resuelve ese valor.

10.4 Anchos mínimos y máximos: 'min-width' y 'max-width'

'min-width'
Valor:  <medida> | <porcentaje> | inherit
Inicial:  depende de la AU
Se aplica a:  todos los elementos excepto los elementos de línea no reemplazados y los elementos tabla
Se hereda:  no
Porcentajes:  referidos al ancho del bloque de contención
Medios:  visuales
'max-width'
Valor:  <medida> | <porcentaje> | none | inherit
Inicial:  none
Se aplica a:  todos los elementos excepto los elementos de línea no reemplazados y los elementos tabla
Se hereda:  no
Porcentajes:  referidos al ancho del bloque de contención
Medios:  visuales

Estas dos propiedades permiten a los autores restringir los anchos de las cajas a cierto rango. Los valores tienen los siguientes significados:

<medida>
Especifica un ancho mimimo o máximo fijo computado.
<porcentaje>
Especifica un porcentaje para determinar el valor computado. El porcentaje es calculado con respecto al ancho del bloque de contención de la caja generada.
none
(Solo en 'max-width') Ninguna limitación en el ancho de la caja.

El siguiente algoritmo describe cómo influyen las dos propiedades el valor computado de la propiedad 'width':

  1. El ancho es computado (sin 'min-width' y 'max-width') siguiendo las reglas que se encuentran en "Computando anchos y márgenes" más arriba.
  2. Si el valor computado de 'min-width' es mayor que el valor de 'max-width', a 'max-width' se le da el valor de 'min-width'.
  3. Si el ancho computado es mayor que 'max-width', las reglas de arriba se aplican nuevamente, pero esta vez usando el valor de 'max-width' como el valor especificado para 'width'.
  4. Si el ancho computado es menor que 'min-width', las reglas de arriba se aplican nuevamente, pero esta vez usando el valor de 'min-width' como el valor especificado para 'width'.

La aplicación del usuario puede definir un valor mínimo no negativo para la propiedad 'min-width', el que puede variar de elemento a elemento y aún depender de otras propiedades. Si 'min-width' queda bajo ese límite, ya sea porque fue definido explícitamente o porque es 'auto' y las reglas de arriba lo hacen demasiado pequeño, la aplicación del usuario puede usar el valor mínimo como valor computado.

10.5 Altura del contenido: la propiedad 'height'

'height'
Valor:  <medida> | <porcentaje> | auto | inherit
Inicial:  auto
Se aplica a:  todos los elementos excepto los elementos de línea no reemplazados, las columnas de la tabla y los grupos de columnas
Se hereda:  no
Porcentajes:  ver el texto
Medios:  visuales

Esta propiedad especifica la altura del contenido de las cajas generadas por los elementos a nivel de bloque y reemplazados.

Esta propiedad no se aplica a los elementos a nivel de línea no reemplazados. La altura de las cajas de los elementos de línea no reemplazados está dada por el valor (posiblemente heredado) 'line-height' del elemento.

Los valores tienen los siguientes significados:

<medida>
Especifica una altura fija.
<porcentaje>
Especifica una altura en porcentaje. El porcentaje es calculado con respecto a la altura del bloque de contención de la caja generada. Si la altura del bloque de contención no se especifica explícitamente (es decir, depende de la altura del contenido), el valor es interpretado como 'auto'.
auto
La altura depende de los valores de otras propiedades. Ver más abajo.

Los valores negativos para 'height' son ilegítimos.

Ejemplo(s):

Por ejemplo, la regla siguiente fija la altura de los párrafos en 100 pixels:

P { height: 100px }

Los párrafos que requieren más de 100 pixels de altura desbordarán de acuerdo a la propiedad 'overflow'.

10.6 Computando alturas y márgenes

Para computar los valores de 'top', 'margin-top', 'height', 'margin-bottom' y 'bottom' debe hacerse una distinción entre los distintos tipos de cajas:

  1. elementos no reemplazados, de línea
  2. elementos reemplazados, de línea
  3. elementos no reemplazados en flujo normal, a nivel de bloque
  4. elementos reemplazados en flujo normal, a nivel de bloque
  5. elementos no reemplazados, flotantes
  6. elementos reemplazados, flotantes
  7. elementos no reemplazados, posicionados absolutamente
  8. elementos reemplazados, posicionados absolutamente

Los puntos 1-6 incluyen posicionamiento relativo.

10.6.1 Elementos no reemplazados, de línea

Si 'top', 'bottom', 'margin-top' o 'margin-bottom' es 'auto', su valor computado es 0. La propiedad 'height' no se aplica, pero la altura de la caja está dada por la propiedad 'line-height'.

10.6.2 Elementos reemplazados, de línea, elementos reemplazados en flujo normal, a nivel de bloque y elementos reemplazados, flotantes

Si 'top', 'bottom', 'margin-top' o 'margin-bottom' es 'auto', su valor computado es 0. Si 'height' es 'auto', el valor computado es la altura intrínseca.

10.6.3 Elementos no reemplazados en flujo normal, a nivel de bloque y elementos reemplazados, flotantes

Si 'top', 'bottom', 'margin-top', or 'margin-bottom' es 'auto', su valor computado es 0. Si 'height' es 'auto', la altura depende si el elemento tiene algún hijo a nivel de bloque y si tiene relleno o bordes. Si sólo tiene hijos a nivel de línea, la altura es la distancia desde la parte superior de la caja de línea que se encuentra más arriba hasta la base de la caja de línea que se encuentra más abajo. Si tiene hijos a nivel de bloque, es la distancia desde el límite del borde superior de la caja a nivel de bloque hija que se halla más arriba, hasta el límite del borde inferior de la caja a nivel de bloque hija que se halla más abajo. Sin embargo, si el elemento tiene un relleno superior distinto a cero y/o un borde superior, entonces el contenido comienza en el límite del margen superior de la hija ubicada más arriba. De manera similar, si el elemento tiene un relleno inferior distinto a cero y/o un borde inferior, entonces el contenido termina en el límite del margen inferior de la hija ubicada más abajo. Solamente los hijos en el flujo normal son tomados en cuenta (es decir, las cajas flotantes y las cajas posicionadas absolutamente son ignoradas, y las cajas posicionadas relativamente son consideradas sin sus desplazamientos). Observe que la caja hija puede ser una caja anónima.

10.6.4 Elementos no reemplazados, posicionados absolutamente

Para los elementos absolutamente posicionados, las dimensiones verticales deben satisfacer esta condición:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = altura del bloque de contención

(Si el estilo de borde es 'none', se usa '0' como ancho de borde.) La solución a esta condición se alcanza mediante algunas sustituciones en el siguiente orden:

  1. Si 'top' tiene el valor de 'auto' se reemplaza con la distancia desde el borde superior del bloque de contención hasta el límite del márgen superior de una hipotética caja que sería la primer caja del elemento si su propiedad 'position' hubiera sido 'static'. (Pero en ver de computar realmente esa caja, las aplicaciones del usuario son libres de suponer su probable posición.) El valor es negativo si la hipotética caja está arriba del bloque de contención.
  2. Si tanto 'height' como 'bottom' son 'auto', se reemplaza 'bottom' por 0.
  3. Si 'bottom' o 'height' es (también) 'auto', se reemplaza cualquier 'auto' en 'margin-top' o 'margin-bottom' por '0'.
  4. Si en este punto tanto 'margin-top' como 'margin-bottom' son también 'auto', se resuelve la ecuación bajo la condición adicional de que los dos márgenes deben tener igual valor.
  5. Si en este punto queda un solo 'auto', se resuelve la ecuación para ese valor.
  6. Si en este punto los valores están sobre-exigidos, se ignora el valor de 'bottom' y se resuelve ese valor.

10.6.5 Elementos reemplazados, posicionados absolutamente

Esta situación es similar a la anterior, excepto que el elemento tiene una altura intrínseca. La secuencia de sustituciones es ahora:

  1. Si'height' es 'auto', lo sustituye la altura intrínseca del elemento.
  2. Si 'top' tiene el valor 'auto', se lo reemplaza con la distancia desde el borde superior de la caja de contención hasta el límite del margen superior de una hipotética caja que resultaría la primer caja del elemento si su propiedad 'position' hubiera sido 'static'. (Pero en vez de computar realmente esa caja, las aplicaciones del usuario son libres de suponer su probable posición.) El valor es negativo si la hipotética caja está encima del bloque de contención.
  3. Si 'bottom' es 'auto', se reemplaza cualquier 'auto' en 'margin-top' o 'margin-bottom' por '0'.
  4. Si en este punto tanto 'margin-top' como 'margin-bottom' son también 'auto', se resuelve la ecuación bajo la condición adicional de que los dos márgenes deben tener igual valor.
  5. Si en este punto queda un solo 'auto', se resuelve la ecuación para ese valor.
  6. Si en este punto los valores están sobre-exigidos, se ignora el valor de 'bottom' y se resuelve ese valor.

10.7 Alturas mínimas y máximas: 'min-height' y 'max-height'

A veces resulta útil restringir la altura de los elementos a cierto rango. Las dos propiedades ofrecen esta función:

'min-height'
Valor:  <medida> | <porcentaje> | inherit
Inicial:  0
Se aplica a:  todos los elementos excepto los elementos de línea no reemplazados y los elementos tabla
Se hereda:  no
Porcentajes:  referidos a la altura del bloque de contención
Medios:  visuales
'max-height'
Value:  <medida> | <porcentaje> | none | inherit
Inicial:  none
Se aplica a:  todos los elementos excepto los elementos de línea no reemplazados y los elementos tabla
Se hereda:  no
Porcentajes:  referidos a la altura del bloque de contención
Medios:  visuales

Estas dos propiedades permiten a los autores restringir la altura de las cajas a un cierto rango. Los valores tienen los siguientes significados:

<medida>
Especifica una mínima o máxima altura computada fija.
<porcentaje>
Especifica un porcentaje para determinar el valor computado. El porcentaje se calcula con respecto a la altura del bloque de contención de la caja generada. Si la altura del bloque de contención se está especificada explícitamente (es decir, depende de la altura del contenido), el valor de porcentaje se interpreta como 'auto'.
none
(Sólo en 'max-height') Ninguna limitación a la altura de la caja.

El siguiente algoritmo describe cómo las dos propiedades influyen en el valor computado de la propiedad 'height':

  1. La altura es computada (sin 'min-height' y 'max-height') siguiendo las reglas sobre "Computando anchos y márgenes" de más arriba.
  2. Si el valor computado de 'min-height' es mayor que el valor de 'max-height', a 'max-height' se le da el valor de 'min-height'.
  3. Si la altura computada es mayor que 'max-height', las reglas anteriores se aplican nuevamente, pero esta vez usando el valor de 'max-height' como el valor especificado para 'height'.
  4. Si la altura computada es mayor que 'min-height', las reglas anteriores se aplican nuevamente, pero esta vez usando el valor de 'min-height' como el valor especificado para 'height'.

10.8 Cálculo de la altura de la línea: las propiedades 'line-height' y 'vertical-align'

Como se describe en la sección sobre contexto de formato de línea, las aplicaciones del usuario fluyen las cajas a nivel de línea en una pila vertical de cajas de línea. La altura de una caja de línea se determina del siguiente modo:

  1. La altura de cada caja a nivel de línea de la caja de línea es calculada (ver "Computando anchos y márgenes" y la propiedad 'line-height').
  2. Las cajas a nivel de línea son alineadas verticalmente de acuerdo a su propiedad 'vertical-align'.
  3. La altura de la caja de línea es la distancia entre la parte superior de la caja ubicada más arriba y la base de la caja ubicada más abajo.

Los elementos a nivel de línea vacíos generan cajas a nivel de línea vacías, pero estas cajas aún tiene márgenes, relleno, bordes y una altura de línea, y en consecuencia influyen en este cálculo tanto como los elementos con contenido.

Observe que si todas las cajas en la caja de línea están alineadas por sus bases, la caja de línea tendrá exactamente la altura de la caja más alta. Sin embargo, si las cajas están alineadas por una línea de base común, la parte superior e inferior de la caja de línea puede no tocar la parte superior e inferior de la caja más alta.

10.8.1 Interlineado y medio interlineado

Como la altura de una caja a nivel de línea puede ser distinta al tamaño de la fuente del texto de la caja (por ej., 'line-height' > 1em), puede haber espacio por encima y por debajo de los signos procesados. La diferencia entre el tamaño de la fuente y el valor computado de 'line-height' se llama interlineado. La mitad del interlineado se llama medio interlineado.

Las aplicaciones del usuario centran verticalmente los signos en una caja a nivel de línea, agregando medio interlineado por encima y por debajo. Por ejemplo, si un fragmento de texto es de '12pt' de alto y el valor de 'line-height' es '14pt', 2 puntos de espacio extra deberían ser agregados: 1pt encima y 1pt abajo de las letras. (Esto se aplica también a las cajas vacías, como si la caja vacía contuviera una letra infinitamente condensada.)

Cuando el valor de 'line-height' es menor que el tamaño de la fuente, la altura final de la caja a nivel de línea será menor que el tamaño de la fuente y los signos procesados serán "sangrados" fuera de la caja. Si una de estas cajas tocan el borde de una caja de línea, los signos procesados también serán "sangrados" dentro de la caja de línea adyacente.

Aunque los márgenes, bordes y relleno de los elementos no reemplazados no entran en el cálculo de la altura de la caja a nivel de línea (y así tampoco en el cálculo de la caja de línea), son también procesados alrededor de las cajas a nivel de línea. Esto significa que si la altura de una caja de línea es más corta que los límites externos de las cajas que contiene, el fondo y el color del relleno y los bordes pueden ser "sangrados" dentro de las cajas de línea adyacentes. Sin embargo, en este caso, algunas aplicaciones del usuario pueden usar la caja de línea para "cortar" las áreas del borde y el relleno (es decir, no procesarlas).

'line-height'
Valor:  normal | <número> | <medida> | <porcentaje> | inherit
Inicial:  normal
Se aplica a:  todos los elementos
Se hereda:  si
Porcentajes:  referidos al tamaño de la fuente del propio elemento
Medios:  visuales

Si la propiedad es puesta en un elemento a nivel de bloque cuyo contenido está compuesto de elementos a nivel de línea, especifica la altura mínima de cada caja a nivel de línea generada.

Si la propiedad es puesta en un elemento a nivel de línea, especifica la altura exacta de cada caja generada por el elemento (Excepto para los elementos a nivel de línea reemplazados, donde la altura de la caja está dada por la propiedad 'height'.)

Los valores para esta propiedad tienen los siguientes significados:

normal
Le dice a las aplicaciones del usuario que pongan como valor computado un valor "razonable" en base al tamaño de la fuente del elemento. El valor tiene el mismo significado que <número>. Recomendamos un valor computado para 'normal' entre 1.0 y 1.2.
<medida>
La altura de la caja es puesta con esta medida. Los valores negativos son ilícitos.
<número>
El valor computado de la propiedad es este número multiplicado por el tamaño de la fuente del elemento. Los valores negativos son ilícitos. De cualquier modo, el número, no el valor computado, es heredado.
<porcentaje>
El valor computado de la propiedad es este porcentaje multiplicado por el tamaño computado de la fuente del elemento. Los valores negativos son ilícitos.

Ejemplo(s):

Las tres reglas en el ejemplo de abajo dan como resultado la misma altura de línea:

DIV { line-height: 1.2; font-size: 10pt }     /* número */
DIV { line-height: 1.2em; font-size: 10pt }   /* medida */
DIV { line-height: 120%; font-size: 10pt }    /* porcentaje */

Cuando un elemento contiene texto que es procesado con más de una fuente, las aplicaciones del usuario deben determinar el valor de 'line-height' de acuerdo con el tamaño de fuente mayor.

Generalmente, cuando sólo hay un valor de 'line-height' para todas las cajas a nivel de línea en un párrafo (y ninguna imagen alta), lo anterior asegurará que las líneas de base de las líneas sucesivas tienen propiedades 'line-height' exactamente separadas. Esto es importante cuando columnas de texto con distintas fuentes tienen que ser alineadas, por ejemplo en una tabla.

Observe que los elementos reemplazados tiene una propiedad 'font-size' y una 'line-height', aún cuando no son usadas directamente para determinar la altura de la caja. La propiedad 'font-size' es, sin embargo, usada para definir las unidades 'em' y 'ex', y 'line-height' tiene un papel en la propiedad 'vertical-align'.

'vertical-align'
Valor:  baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje> | <medida> | inherit
Inicial:  baseline
Se aplica a:  los elementos a nivel de línea y 'table-cell'
Se hereda:  no
Porcentajes:  referidos a 'line-height' del propio elemento
Medios:  visuales

Esta propiedad afecta el posicionamiento vertical dentro de una caja de línea de las cajas generadas por un elemento a nivel de línea. Los siguientes valores sólo tienen significado con respecto a un elemento a nivel de línea padre, o a un elemento a nivel de bloque padre, si ese elemento genera cajas de línea anónimas; no tienen ningún efecto si no existe tal padre.

Nota. Los valores de esta propiedad tienen significados ligeramente distintos en el contexto de tablas. Por favor, consulte la sección sobre algoritmos para la altura de la tabla por más detalles.

baseline
Encuadra la línea de base de la caja con la línea de base de la caja padre. Si la caja no tiene una línea de base, alínea la base de la caja con la línea de base del padre.
middle
Alínea el punto medio vertical de la caja con la línea de base de la caja padre más la mitad de la altura de la x del padre.
sub
Baja la línea de base de la caja hasta la posición apropiada para los subíndices de la caja del padre. (Este valor no tiene ningún efecto en el tamaño de la fuente del texto del elemento.)
super
Eleva la línea de base de la caja hasta la posición adecuada por los superíndices de la caja del padre. (Este valor no tiene ningún efecto en el tamaño de la fuente del texto del elemento.)
text-top
Alínea la parte superior de la caja con la parte superior de la fuente del elemento padre.
text-bottom
Alínea la base de la caja con la base de la fuente del elemento padre.
<porcentaje>
Eleva (valor positivo) o baja (valor negativo) la caja en esta distancia (un porcentaje del valor 'line-height'). El valor '0%' significa lo mismo que 'baseline'.
<medida>
Eleva (valor positivo) o baja (valor negativo) la caja en esta distancia. El valor '0cm' significa lo mismo que 'baseline'.

Los valores restantes se refieren a la caja de línea en la cuál aparece la caja generada:

top
Alínea la parte superior de la caja con la parte superior de la caja de línea.
bottom
Alínea la base de la caja con la base de la caja de línea.




Copyright  ©  1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.

Traducción: Carlos Benavidez