Contenidos
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:
Si no hay tal antepasado, el borde de la caja del contenido del elemento raíz establece el bloque de contención.
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 |
|---|---|
| body | B.C. inicial (depende de la AU) |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
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 |
|---|---|
| body | B.C. inicial |
| div1 | B.C. inicial |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
Posicionando "em1", su bloque de contención se convierte en la caja del antepasado posicionado más cercano (es decir, lo generado por "div1").
| 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:
Los valores negativos para 'width' son ilegítimos.
Por ejemplo, la siguiente regla fija el ancho del contenido de los párrafos en 100 pixels:
P { width: 100px }
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:
Los puntos 1-6 incluyen posicionamiento relativo.
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'.
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.
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.
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.
Si 'left', 'right', 'width', 'margin-left' o 'margin-right' es especificado como 'auto', su valor computado es '0'.
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.
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:
Esta situación es similar a la previa, excepto que el elemento tiene un ancho intrínseco. La secuencia de sustituciones es ahora:
| 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 |
| 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:
El siguiente algoritmo describe cómo influyen las dos propiedades el valor computado de la propiedad '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.
| 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:
Los valores negativos para 'height' son ilegítimos.
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'.
Para computar los valores de 'top', 'margin-top', 'height', 'margin-bottom' y 'bottom' debe hacerse una distinción entre los distintos tipos de cajas:
Los puntos 1-6 incluyen posicionamiento relativo.
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'.
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.
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.
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:
Esta situación es similar a la anterior, excepto que el elemento tiene una altura intrínseca. La secuencia de sustituciones es ahora:
A veces resulta útil restringir la altura de los elementos a cierto rango. Las dos propiedades ofrecen esta función:
| 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 |
| 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:
El siguiente algoritmo describe cómo las dos propiedades influyen en el valor computado de la propiedad 'height':
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:
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.
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).
| 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:
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'.
| 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.
Los valores restantes se refieren a la caja de línea en la cuál aparece la caja generada:
|
Copyright © 1998 W3C (MIT, INRIA, Keio ), All Rights Reserved.
Traducción: Carlos Benavidez |