Flujo de Elementos HTML

Un párrafo es un elemento de nivel de bloque. En este ejemplo, el nivel de bloque de los elementos adyacentes a este párrafo les situa en nuevas lineas debajo.

Por defecto, los elementos de bloque se estiran para adaptarse al 100% del ancho de su contenedor padre, y su altura viene dada por su contenido hijo. La anchura y altura total de un elemento de bloque vienen dadas por: contenido + margen interno (padding) + ancho/alto del borde.

En general, los elementos de bloque están separados por nuestros márgenes. En este ejemplo, debido al colapso de márgenes, los párrafos están separados por el ancho de uno de sus márgenes, no ambos.

Los elementos de linea (inline) como éste y como éste otro se sitúan ambos en la misma linea como nodos de texto adyacentes, si hay suficiente espacio en la misma línea. Cuando un elemento de linea necesita más espacio del que hay disponible en la linea donde está, puede extenderse a la siguiente línea si necesita más espacio -cómo es el caso del texto contenido en este elemento-, o bien moverse completamente a una nueva linea si no cabe entero, como sucede por ejemplo con la siguiente imagen: