¿Por qué un elemento de nivel de bloque es más alto que la imagen que contiene?

Question

Sin especificaciones de altura, un <div> (o un <p> o cualquier otro elemento similar) que contenga una sola imagen es un poco más alto que él. Parece que es 4px más alto en Firefox y 5px más en Chrome (según Firebug y su equivalente en cromo). El espacio extra se agrega debajo de la imagen.

Obviamente puedo solucionar esto asignando una altura al div, pero me gustaría entender por qué ese espacio está ahí y si hay una manera de eliminarlo.

Answer 1

Image es un elemento de nivel en línea por lo que se adhiere a la configuración de altura de línea y se establece en la línea de base del texto de forma predeterminada.

Si va a configurar la imagen tenga vertical-align: bottom va a posicionar la imagen en la línea de descenso (parte inferior de la línea de texto)

La otra opción es establecer la imagen para display: block y pase todo este truco en línea

Answer 2

Añadir a CSS:

img {display: block;} 

Por defecto img tiene display:inline cosas así toda la línea de texto relacionados.

Answer 3

Agregue line-height: 0px; al que contiene el elemento.

Ajuste del img-display:block también funciona pero puede romperse si algún otro lugar que está ocultando y mostrando imágenes con display:none/display:inline.