Los elementos que no son formateados como elementos en bloque son elementos en línea. Un elemento en línea puede compartir el espacio de una línea con otros elementos. Considérese este ejemplo:
<P>Aquí <STRONG>aparecen</STRONG> varias <EM>palabras enfatizadas</EM>.</P>
El elemento 'P' es normalmente un elemento en bloque, mientras que los elementos 'STRONG' y 'EM' son elementos en línea. Si el elemento 'P' es lo suficientemente ancho como para que se formatee todo el elemento en una sola línea, habrá dos elementos en línea en esa línea:
Aquí aparecen varias palabras enfatizadas.
Si no hay suficiente espacio en una sola línea, un elemento en línea será partido en varios cuadros:
<P>Aquí aparecen <EM>varias palabras</EM> enfatizadas.</P>
Este ejemplo podría formatearse como sigue:
Aquí aparecen varias palabras enfatizadas
Si el elemento tiene márgenes, bordes, rellenos u otras decoraciones asociadas, éstos no tendrán efecto allí donde el elemento está partido:
------
Aquí aparecen |varias
------
--------
palabras| enfatizadas
--------
(Esta "figura" esta ligeramente distorsionada debido al uso de gráficos ASCII.) Véase en la sección 4.4 una descripción de cómo calcular la altura de las líneas.
Un elemento reemplazado es un elemento que es reemplazado por un contenido al que se apunta desde el elemento. P.ej., en HTML, el elemento 'IMG' es reemplazado por la imagen a la que apunta el atributo 'SRC'. Se puede suponer que los elementos reemplazados van con sus propias dimensiones intrínsecas. Si el valor de la propiedad 'width' es 'auto', se usará la anchura intrínseca como anchura del elemento. Si se especifica un valor diferente de 'auto' en la hoja de estilo, se usará este valor, y el elemento reemplazado se escalará como corresponda (el método de escalado dependerá del tipo de medio). La propiedad 'height' se usa de la misma manera.
Los elementos reemplazados pueden ser en bloque o en línea.
Todos los elementos tienen una propiedad 'line-height' (altura de línea) que, en principio, da la altura total de una línea de texto. Para llegar a esa altura de línea, se añade espacio por encima y por debajo del texto de la línea. Por ejemplo, si el texto tiene 12pt de alto y el 'line-height' está establecido en '14pt', se añade un espacio de 2pt, a saber, 1pt por encima y 1pt por debajo de la línea. Los elementos vacíos influyen en este cálculo igual que lo hacen los elementos con contenido.
La diferencia entre el tamaño de la fuente y la altura de la línea se llama interlineado. A la mitad del interlineado se le denomina semi-interlineado. Después del formato, cada línea formará un cuadro de línea rectangular.
Si una línea de texto contiene secciones con valores diferentes de 'line-height' (porque haya elementos en línea dentro de la línea), entonces cada una de esas secciones tiene su propio semi-interlineado por encima y por debajo. La altura del cuadro de línea va desde la parte superior de la sección más alta hasta la parte inferior de la sección más baja. Obsérvese que la parte superior y la parte inferior no corresponden necesariamente al elemento más alto, ya que los elementos pueden posicionarse verticalmente por medio de la propiedad 'vertical-align'. Para formar un párrafo, cada cuadro de línea se inserta inmediatamente debajo de la línea anterior.
Obsérvese que los márgenes, bordes y rellenos por encima y por debajo de elementos en línea no reemplazados no influyen en la altura de la línea. En otras palabras: si el 'line-height' es demasiado pequeño para el relleno o borde elegidos, se superpondrá con el texto de otras líneas.
Los elementos reemplazados de la línea (p.ej., imágenes) pueden agrandar el cuadro de línea si la parte superior del elemento reemplazado (es decir, incluyendo relleno, borde y margen) está por encima de la sección de texto más alta, o si su parte inferior está por debajo de la sección más baja.
En el caso normal en que sólo haya un valor de 'line-height' para todo el párrafo y no haya imágenes altas, la definición recién dada asegura que las líneas de base de líneas sucesivas estarán separadas exactamente por un 'line-height'. Esto es importante cuando deben alinearse columnas de texto con fuentes distintas, por ejemplo en una tabla.
Obsérvese que esto no imposibilita que los textos de dos líneas adyacentes se superpongan. El 'line-height' puede ser menor que la altura del texto, en cuyo caso el interlineado será negativo. Esto es útil si se sabe que el texto no contiene descendentes (p.ej. porque sólo contiene letras mayúsculas), ya que entonces se pueden acercar más las líneas.
El lienzo es la parte de la superficie de dibujo del AU en que se representan los documentos. Ningún elemento estructural del documento corresponde al lienzo, lo cual plantea dos cuestiones a la hora de formatear un documento:
Una respuesta razonable a la primera pregunta es que la anchura inicial del lienzo se base en el tamaño de la ventana, pero CSS1 deja esta cuestión a merced del AU. También es razonable esperar que el AU cambie la anchura del lienzo cuando se cambie el tamaño de la ventana, pero esto también está fuera del alcance de CSS1.
Las extensiones HTML han sentado un precedente para la segunda cuestión: los atributos del elemento 'BODY' establecen el fondo de todo el lienzo. Con el fin de tener en cuenta las suposiciones de los diseñadores, CSS1 introduce una regla especial para averiguar el fondo del lienzo:
Si el valor del 'background' del elemento 'HTML' es distinto a 'transparent', entonces úsese el fondo especificado. Si no, úsese el valor del 'background' del elemento 'BODY'. Si el valor resultante es 'transparent', la representación queda indefinida.
Esta regla permite lo siguiente:
<HTML STYLE="background: url(http://style.com/marmol.png)"> <BODY STYLE="background: red">
En este ejemplo, el lienzo será cubierto con "marmol". El fondo del elemento 'BODY' (que puede cubrir el lienzo completamente o no) será rojo.
Hasta que haya otros medios disponibles para hacer referencia al lienzo, se recomienda que las propiedades del lienzo se establezcan en el elemento 'BODY'.
Las propiedades y valores de CSS1 no pueden describir el comportamiento del elemento 'BR'. En HTML, el elemento 'BR' especifica un salto de línea entre palabras. En efecto, el elemento se reemplaza por un salto de línea. Versiones futuras de CSS podrían manejar contenido añadido y reemplazado, pero los formateadores CSS1 deben tratar los 'BR' de forma especial.