CSS: elementos de bloque y elementos en línea

Un elemento HTML se puede mostrar como elemento de bloque ( display: block ) o como elemento en línea ( display: inline ). Comprender exactamente la diferencia entre estos dos tipos de presentación es fundamental para un desarrollador.

Elementos de bloque ( block )

Elementos de bloque son, por ejemplo: <p>, <div>, <ul>, <li>, <form>, etc (siempre que no cambiemos su display por defecto).
Se caracterizan por:

• Se colocan siempre en su propia línea, debajo de los elementos anteriores
• Se expanden hasta ocupar toda la anchura disponible ( la del elemento padre )
• La altura se ajusta al contenido
• Pueden contener otros elementos inline o block
• Se les puede fijar altura y anchura con CSS ( width y height )
• Se les puede asignar margin y padding con CSS
• Ignoran la propiedad CSS vertical-align

Elementos en línea ( inline )

Elementos en línea son, por ejemplo: <a>, <span>, <b>, <em>, etc (siempre que no cambiemos su display por defecto).
Se caracterizan por:

• No crean una nueva línea. Se colocan ‘en línea’ con otros elementos
• Su anchura y altura se ajusta al contenido y no podemos cambiarlas con CSS ( ignora widht y height )
• Sólo podemos fijar margin-left y margin-right. Ignoran margin-top y margin-bottom 
• Sólo pueden contener otros elementos inline
• Debe respetar la propiedad white-space de CSS
• Respeta vertical-align

Particularidades de margin y padding para elementos inline

El padding y el margin para elementos inline puede aplicarse en los cuatro lados, pero el que se define arriba y abajo no va a afectar a otros elementos, no los desplaza. Es como si ignorara estos valores, pero podemos apreciar el padding aplicado si definimos un borde o un color de fondo:

Imágenes y elementos inline-block

El elemento <img>(imagen) es un poco especial porque se comporta como una mezcla de elemento en línea y elemento de bloque:

Realmente es un elemento inline, pero de un tipo especial que admite altura y anchura. En el estándar se define como ”elemento en línea reemplazado” ( replaced inline element ) y para estos elementos width y height sí aplica.

Se define como un elemento reemplazado porque no tiene contenido por si mismo, sino que será despues reemplazado por el archivo que se obtiene de su URL.

Existe un tipo de display para hacer que cualquier elemento se comporte como lo hacen las imágenes, como un elemento de bloque que se coloca en línea:

display: inline-block

Para elementos reemplazados ( como <img> ) display: inline-block es exactamente igual al display: inline que tienen por defecto.

Referencias:
Inline elements and padding
W3C CSS2 Visual formatting model