Bild in div hat zusätzlichen Platz unter dem Bild

Question

Warum im folgender Code die Höhe des div größer ist als die Höhe der img ? Unter dem Bild ist eine Lücke, aber es scheint sich nicht um einen Abstand/Rand zu handeln.

Was ist die Lücke oder der zusätzliche Platz unter dem Bild?

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

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

Answer 1

Standardmäßig wird ein Bild inline gerendert, wie ein Buchstabe, so dass es auf der gleichen Zeile wie a, b, c und d steht.

Unterhalb dieser Zeile ist Platz für die Unterlängen die Sie bei Buchstaben wie g, j, p und q finden.

Sie können:

• einstellen vertical-align des Bildes, um es an anderer Stelle zu positionieren (z. B. die middle ) o

• ändern Sie die display also ist es nicht inline.

  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>

---

Das enthaltene Bild ist gemeinfrei und bezogen aus Wikimedia Commons

Answer 2

Eine weitere in diesem Bericht vorgeschlagene Option Blog-Beitrag wird der Stil des Bildes wie folgt festgelegt style="display: block;"

Answer 3

Schnelle Lösung:

An Entfernen Sie die Lücke unter dem Bild können Sie:

• Setzen Sie die vertikal ausrichten Eigenschaft des Bildes auf vertical-align: bottom; vertical-align: top; o vertical-align: middle;
• Setzen Sie die Anzeigeeigenschaft des Bildes auf display:block;

Im folgenden Code finden Sie eine Live-Demo:

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

---

Erläuterung: Warum befindet sich unter dem Bild eine Lücke?

Die Lücke oder der zusätzliche Platz unter dem Bild ist kein Fehler oder Problem, sondern das Standardverhalten. Die eigentliche Ursache ist, dass Bilder durch Elemente ersetzt werden ( _siehe MDN ersetzte Elemente_ ). Dadurch können sie sich "wie ein Bild" verhalten und haben ihre eigenen Abmessungen, ihr eigenes Seitenverhältnis....
Die Browser berechnen ihre Anzeigeeigenschaft nach inline aber sie verleihen ihnen ein besonderes Verhalten, das sie näher an inline-block Elemente (Sie können sie vertikal ausrichten, ihnen eine Höhe, einen oberen/unteren Rand und eine Auffüllung geben, sie transformieren ...).

Das bedeutet auch, dass:

<img> hat keine Grundlinie, wenn also Bilder in einer Inline-Formatierung verwendet werden Kontext mit vertical-align: baseline, der untere Teil des Bildes wird auf der Textgrundlinie platziert.
( _Quelle: MDN , Hervorhebung von mir_ )

Da die Browser die Eigenschaft vertical-align standardmäßig an der Grundlinie ausrichten, ist dies das Standardverhalten. Die folgende Abbildung zeigt, wo sich die Grundlinie im Text befindet:

( Bildquelle )

An der Grundlinie ausgerichtete Elemente müssen Platz lassen für die Unterlängen die unter die Grundlinie reichen (wie j, p, g ... ), wie Sie auf dem obigen Bild sehen können. In dieser Konfiguration, der untere Teil des Bildes wird an der Grundlinie ausgerichtet wie Sie in diesem Beispiel sehen können:

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>

---

Aus diesem Grund ist das Standardverhalten der <img> Tag eine Lücke am unteren Rand seines Containers erzeugt und warum das Ändern der Eigenschaft vertical-align oder der Eigenschaft display diese Lücke beseitigt, wie in der folgenden Demo zu sehen ist:

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>

Answer 4

Man kann auch die Zeilenhöhe der Eltern aufheben:

#wrapper {
  line-height: 0;
}

Alle Korrekturen: http://jsfiddle.net/FaPFv/

Answer 5

Sie müssen diese Eigenschaft nur noch zuweisen:

img {
    display: block;
}

Die Bilder haben standardmäßig diese Eigenschaft:

img {
    display: inline;
}