Para casos en los que el principio de un párrafo tenga importancia suficiente para ser un encabezado (h1-h6) en lugar de un mero strong.

¿Qué hacer para que un encabezado y un párrafo situado a continuación (p) aparezcan al mismo nivel (en la misma línea del texto)?

Definir una regla CSS con display: run-in;. Tiene la pega de funcionar solamente en Opera (probado en la versión 9.10), y parece ser que funciona de mala manera en Safari 1.3.2, y de muy mala manera en Internet Explorer 5.2 de Mac, lo que indica que su uso no es muy recomendable.

El código XHTML utilizado es el siguiente (yo he utilizado un h2, pero valen todos):

<h2>A run-in heading.</h2>
<p>And a paragraph of text that follows it.</p>

Aplicar la regla display con el valor run-in al encabezado, con el siguiente código CSS:

h2 {display: run-in;}
h2:after{content: ". ";} /*para no tener que incluir el punto en el encabezado*/
p {background:lime; margin-left:20px;
width:200px; display:block;}/*Para darle forma al ejemplo*/

Viendo el resultado la caja del encabezado queda insertada en la del párrafo, cosa que no ocurre si la regla aplicada al párrafo (la última de todas) se aplicase al encabezado.

Ver ejemplo.

Referencias y enlaces relacionados

• Visual formatting model (W3C CSS 2.1 Working Draft)
• CSS2 – The display declaration (Quirksmode)