- Dentro de los elementos en bloque se consideran, además de los elementos en bloque en sí, los elementos objetos de lista y los elementos flotantes.
- ¿Qué es un elemento flotante?
- El caso típico de un elemento flotante es una figura metida en un párrafo, a un lado. El texto rodea a la figura, ajustándose automáticamente a la anchura disponible, así:
- Ah, ya entiendo.
- En esta figura se representa un elemento en bloque (el elemento UL) y elementos objeto de lista (los elementos LI):
Como hemos dicho antes, cada elemento en bloque define un cuadro, y los márgenes son los que fijan la distancia que queda entre los cuadros. Pues bien, los márgenes verticales de dos elementos en bloque adyacentes no se suman, sino que se reducen al mayor de los dos.
- No entiendo.
- Mira. El cuadro azul tiene un margen inferior de 4 centímetros. El cuadro rojo tiene un margen superior de 2 centímetros. Si colocamos el cuadro rojo a continuación del cuadro azul, la distancia que los separa es de 4 centímetros, que es el máximo de 4cm y 2cm, y no 6cm, que es lo que podría parecer lógico en un principio:
- Ajá...
- Se supone que así se obtienen resultados más acordes con lo que espera el diseñador.
- Ya.
- La especificación también habla de cómo calcular la anchura de los elementos en bloque, y la de sus márgenes, rellenos y bordes derechos e izquierdos, pero no dice nada de la altura. En principio la altura no es relevante, porque los elementos en bloque se van colocando unos a continuación de otros, y no hay mucho control sobre el formato vertical. Ten en cuenta que no todos los medios que acceden a la Web contemplan el concepto de "página". La especificación CSS2 es mucho más completa en ese sentido, y más compleja, porque hay muchas más posibilidades a la hora de controlar la posición exacta de cada cuadro, y de especificar reglas para medios concretos (pantallas, impresoras, sintetizadores de voz, etc.).
- Sí, pero de eso ya hablaremos en el futuro, ¿verdad?
- Verdad. De los elementos objeto de lista, debes saber que la única particularidad que tienen es que se representan con un marcador. Lo veremos con más detalles cuando hablemos de las propiedades de estilo. Y sobre los elementos flotantes, pues... la verdad es que es un pequeño lío...
- Uf, pues si para ti es un lío, imagina para mí...
- Lo mejor es saber que si un cuadro es flotante, el texto de los demás cuadros lo rodearán, respetando siempre los márgenes del elemento flotante, como se ve en esta figura:
Como ves, los márgenes del elemento flotante se suman a los márgenes del cuadro del párrafo, y no sucede como te he indicado antes para el margen superior.
- Mmm, ya veo...
- Hablemos un poco de los elementos en línea.
- Hablemos, hablemos...
Sitio Web mantenido por Juan R. Pozo (jrpozo arroba conclase punto net).
Última modificación: 14/10/2001 - © 2001 Juan R. Pozo y conclase.net