La imagen dentro de div tiene espacio adicional debajo de la imagen

503

¿Por qué en el siguiente código la altura de la dives mayor que la altura de la img? Hay un espacio debajo de la imagen, pero no parece ser un relleno / margen.

¿Cuál es el espacio o espacio adicional debajo de la imagen?

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}
<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Imagen con un espacio o espacio en blanco debajo

Misha Moroshko
fuente
10
Aquí hay una respuesta breve y completa a esta pregunta: stackoverflow.com/a/31445364/3597276
Michael Benjamin
1
Aquí hay una buena lectura sobre este tema: La extraña brecha <img> en HTML
Matheus Avellar

Respuestas:

601

De forma predeterminada, una imagen se representa en línea, como una letra, por lo que se ubica en la misma línea en la que se ubican a, b, cyd.

Hay espacio debajo de esa línea para los descendientes que encuentre en letras como g, j, p y q.

Demostración de descendientes.

Usted puede:

  • ajustar el vertical-alignde la imagen para colocar en otro lugar (por ejemplo la middle) o
  • cambie el displaypara que no esté en línea.

div {
  border: solid black 1px;
  margin-bottom: 10px;
}

#align-middle img {
  vertical-align: middle;
}

#align-base img {
  vertical-align: bottom;
}

#display img {
  display: block;
}
<div id="default">
<h1>Default</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

<div id="align-middle">
<h1>vertical-align: middle</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
  
  <div id="align-base">
<h1>vertical-align: bottom</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>

<div id="display">
<h1>display: block</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>


La imagen incluida es de dominio público y proviene de Wikimedia Commons

Quentin
fuente
99
Para ser más precisos, esto sucede b / c elementos en línea ocupan el espacio de su corriente line-height. Establecer line-heightla dimensión deseada también superaría el espacio en blanco no deseado.
Kevin Boucher
3
¿"F" califica como descendiente?
j08691
2
@ j08691 - Depende de la fuente.
Quentin
134

Otra opción sugerida aquí es establecer el estilo de la imagen comostyle="display: block;"

La A
fuente
44
Gracias. Esto también solucionó un problema similar con el espacio debajo de una película flash. (pantalla agregada: bloquear para incrustar / etiquetas de objeto)
jessieloo
55
o inline-blocksi aún desea que se muestre en línea como lo hacen normalmente las imágenes.
Ian
66
@Ian @Imperative inline-blockno parece estar funcionando.
p.matsinopoulos
93

Arreglo rapido:

Para eliminar el espacio debajo de la imagen , puede:

  • Establezca la propiedad de alineación vertical de la imagen en vertical-align: bottom; vertical-align: top;overtical-align: middle;
  • Establezca la propiedad de visualización de la imagen en display:block;

Vea el siguiente código para una demostración en vivo:


Explicación: ¿por qué hay un espacio debajo de la imagen?

El espacio o espacio adicional debajo de la imagen no es un error o problema, es el comportamiento predeterminado. La causa raíz es que las imágenes son elementos reemplazados ( ver elementos reemplazados MDN ). Esto les permite "actuar como una imagen" y tener sus propias dimensiones intrínsecas, relación de aspecto ...
Los navegadores calculan su propiedad de visualización inlinepero les otorgan un comportamiento especial que los acerca a los inline-blockelementos (como puede alinearlos verticalmente, proporcione ellos una altura, margen superior / inferior y relleno, transforma ...).

Esto también significa que:

<img>no tiene línea base, por lo que cuando las imágenes se usan en un contexto de formato en línea con alineación vertical: línea base, la parte inferior de la imagen se colocará en la línea base del texto.
( fuente: MDN , énfasis mío )

Como los navegadores calculan de manera predeterminada la propiedad de alineación vertical a la línea de base, este es el comportamiento predeterminado. La siguiente imagen muestra dónde se encuentra la línea de base en el texto:

Ubicación de la línea de base en el texto. ( Fuente de la imagen )

Los elementos alineados con la línea de base deben mantener espacio para los descendientes que se extienden por debajo de la línea de base (como j, p, g ...) como se puede ver en la imagen de arriba. En esta configuración, la parte inferior de la imagen está alineada en la línea base, como puede ver en este ejemplo:

div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>


Es por eso que el comportamiento predeterminado de la <img>etiqueta crea un espacio en la parte inferior de su contenedor y por qué al cambiar la propiedad de alineación vertical o la propiedad de visualización se elimina como en la siguiente demostración:

div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}

.block img{
  display:block;
}
.bottom img{
  vertical-align:bottom;
}
<p>Default:</p>
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

web-tiki
fuente
Por eso, establecer el tamaño de fuente en 0 no funciona. o lo hace?
Persijn
2
@Persijn lo hace. Me gusta la configuración, line-height:0;pero no considero que esto sea una buena solución en comparación con el cambio de las propiedades de alineación vertical o visualización
web-tiki
2
Sin embargo, tenga en cuenta que algunos navegadores no respetan font-size:0: establecen el tamaño de fuente al tamaño mínimo en la configuración del usuario.
Sr. Lister
Sí, parece un espacio en blanco.
mrbengi el
bueno, creo que la middle text-top sub superposición en la foto no es la correcta.
xianshenglu
40

También se puede anular la altura de línea de los padres:

#wrapper {
  line-height: 0;
}

Todas las correcciones: http://jsfiddle.net/FaPFv/

Pavlo
fuente
55
¡ADVERTENCIA! esto también matará cualquier nodo de texto en el #wrapper. como será heredado ¡Pero puntos de bonificación para ese increíble violinista! aquí se actualiza con nodos de texto. jsfiddle.net/FaPFv/30
gcb
Alternativamente, tamaño de fuente: 0
Kiran
13

Todo lo que tiene que hacer es asignar esta propiedad:

img {
    display: block;
}

Las imágenes por defecto tienen esta propiedad:

img {
    display: inline;
}
Daniel Díaz
fuente
7

Puede usar varios métodos para este problema, como

  1. Utilizando line-height

    #wrapper {  line-height: 0px;  }
  2. Utilizando display: flex

    #wrapper {  display: flex;         }
    #wrapper {  display: inline-flex;  }
  3. El uso de display: block, table, flexyinherit

    #wrapper img {  display: block;    }
    #wrapper img {  display: table;    }
    #wrapper img {  display: flex;     }
    #wrapper img {  display: inherit;  }
Santosh Khalse
fuente
Por favor, no recomiende el line-heighttruco muy descuidado , o al menos deje en claro por qué es la peor "solución" de todas: en el momento en que alguien coloca texto junto a la imagen (especialmente líneas múltiples preformateadas con etiquetas BR), se encontrarán en una situación peor de la que comenzaron.
Sz.
5

Solía line-height:0y funciona bien para mí.

Abdulla khan
fuente
Lo sentimos, -1: eso arruina el posicionamiento del texto, por lo que si alguien también pone algo de texto (especialmente multilínea, digamos, con <BR>) al lado de la imagen, tendrá un desorden mal colocado, superpuesto o sobresaliente.
Sz.
3

Descubrí que funciona muy bien usando display: block; en la imagen y alinear verticalmente: arriba; en el texto

.imagebox {
    width:200px;
    float:left;
    height:88px;
    position:relative;
    background-color: #999;
}
.container {
    width:600px;
    height:176px;
    background-color: #666;
    position:relative;
    overflow:hidden;
}
.text {
    color: #000;
    font-size: 11px;
    font-family: robotomeduim, sans-serif;
    vertical-align:top;
    
}

.imagebox img{ display:block;}
<div class="container">
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
</div>

o puede editar el código un JS FIDDLE

Timothy
fuente
-1

Acabo de agregar float:lefta div y funcionó

TomoMiha
fuente
99
Esto se debe a que las float:leftcausas de configuracióndisplay:block
Kevin Boucher