L'immagine all'interno del div ha spazio extra sotto l'immagine

Perché nel codice seguente l'altezza di divè maggiore dell'altezza di img? C'è uno spazio sotto l'immagine, ma non sembra essere un'imbottitura / margine.

Qual è il divario o lo spazio extra sotto l'immagine?

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Per impostazione predefinita, un'immagine viene resa in linea, come una lettera, quindi si trova sulla stessa linea su cui si trovano a, b, c e d.

C'è spazio sotto quella linea per i discendenti che trovi su lettere come g, j, peq.

Puoi:

• regolare l' vertical-alignimmagine per posizionarla altrove (ad es. middle) o
• cambia in displaymodo che non sia in linea.

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>

L'immagine inclusa è di dominio pubblico e proviene da Wikimedia Commons

Un'altra opzione suggerita qui è l'impostazione dello stile dell'immagine comestyle="display: block;"

Soluzione rapida:

Per rimuovere il divario sotto l'immagine , puoi:

• Impostare la proprietà di allineamento verticale dell'immagine su vertical-align: bottom; vertical-align: top;overtical-align: middle;
• Impostare la proprietà di visualizzazione dell'immagine su display:block;

Vedi il codice seguente per una demo live:

#vAlign img {
  vertical-align :bottom;
}
#block img{
  display:block;
}

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

<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

Spiegazione: perché c'è un gap sotto l'immagine?

Il divario o lo spazio extra sotto l'immagine non è un bug o un problema, è il comportamento predefinito. La causa principale è che le immagini sono elementi sostituiti ( vedere Elementi sostituiti MDN ). Ciò consente loro di "agire come un'immagine" e di avere le proprie dimensioni intrinseche, le proporzioni ....
I browser calcolano le proprietà di visualizzazione inlinema danno loro un comportamento speciale che li avvicina agli inline-blockelementi (come puoi allinearli verticalmente, dare loro un'altezza, margine superiore / inferiore e imbottitura, trasforma ...).

Questo significa anche che:

<img>non ha una linea di base, quindi quando le immagini vengono utilizzate in un contesto di formattazione in linea con allineamento verticale: linea di base, la parte inferiore dell'immagine verrà posizionata sulla linea di base del testo.
( fonte: MDN , sottolineatura mia )

Poiché i browser per impostazione predefinita calcolano la proprietà di allineamento verticale sulla linea di base, questo è il comportamento predefinito. L'immagine seguente mostra dove si trova la linea di base sul testo:

( Fonte immagine )

Gli elementi allineati alla linea di base devono mantenere spazio per i discendenti che si estendono al di sotto della linea di base (come j, p, g ...), come puoi vedere nell'immagine sopra. In questa configurazione, la parte inferiore dell'immagine è allineata sulla linea di base, come puoi vedere in questo esempio:

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>

Questo è il motivo per cui il comportamento predefinito del <img>tag crea uno spazio nella parte inferiore del suo contenitore e perché la modifica della proprietà di allineamento verticale o della proprietà di visualizzazione lo rimuove come nella seguente demo:

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>

Si può anche annullare l'altezza della linea del genitore:

#wrapper {
  line-height: 0;
}

Tutte le correzioni: http://jsfiddle.net/FaPFv/

Tutto quello che devi fare è assegnare questa proprietà:

img {
    display: block;
}

Le immagini per impostazione predefinita hanno questa proprietà:

img {
    display: inline;
}

È possibile utilizzare diversi metodi per questo problema come

1. utilizzando line-height

   #wrapper {  line-height: 0px;  }

2. utilizzando display: flex

   #wrapper {  display: flex;         }
   #wrapper {  display: inline-flex;  }

3. Usando display: block, table, flexeinherit

   #wrapper img {  display: block;    }
   #wrapper img {  display: table;    }
   #wrapper img {  display: flex;     }
   #wrapper img {  display: inherit;  }

Ho usato line-height:0e funziona bene per me.

Ho trovato che funziona benissimo usando display: block; sull'immagine e vertical-align: top; sul testo.

.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>

oppure puoi modificare il codice un JS FIDDLE

Ho appena aggiunto float:leftdiv e ha funzionato