Das Bild in div hat zusätzlichen Platz unter dem Bild

Warum ist im folgenden Code die Höhe von divgrößer als die Höhe von img? Es gibt eine Lücke unter dem Bild, aber es scheint keine Polsterung / Rand zu sein.

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>

Standardmäßig wird ein Bild wie ein Buchstabe inline gerendert, sodass es sich in derselben Zeile befindet, in der sich a, b, c und d befinden.

Unterhalb dieser Zeile ist Platz für die Nachkommen, die Sie auf Buchstaben wie g, j, p und q finden.

Du kannst:

• Passen Sie das vertical-alignBild an, um es an einer anderen Stelle zu positionieren (z. B. middle) oder
• Ändern Sie das, displaydamit es nicht inline ist.

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 stammt von Wikimedia Commons

Eine weitere hier vorgeschlagene Option ist das Festlegen des Bildstils alsstyle="display: block;"

Schnelle Lösung:

Um die Lücke unter dem Bild zu entfernen , können Sie:

• Stellen Sie die vertikale Ausrichtungseigenschaft des Bildes auf vertical-align: bottom; vertical-align: top;oder einvertical-align: middle;
• Setzen Sie die Anzeigeeigenschaft des Bildes auf display:block;

Eine Live-Demo finden Sie im folgenden Code:

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

Erklärung: Warum gibt es eine Lücke unter dem Bild?

Die Lücke oder der zusätzliche Platz unter dem Bild ist kein Fehler oder Problem, sondern das Standardverhalten. Die Hauptursache ist, dass Bilder ersetzte Elemente sind ( siehe MDN ersetzte Elemente ). Dies ermöglicht es ihnen, "sich wie ein Bild zu verhalten " und ihre eigenen intrinsischen Dimensionen und ihr eigenes Seitenverhältnis zu haben.
Browser berechnen ihre Anzeigeeigenschaften, inlinegeben ihnen jedoch ein spezielles Verhalten, das sie näher an inline-blockElementen heranführt (da Sie sie vertikal ausrichten können, geben ihnen eine Höhe, oberer / unterer Rand und Polsterung, transformiert ...).

Dies bedeutet auch, dass:

<img>hat keine Grundlinie. Wenn Bilder in einem Inline-Formatierungskontext mit vertikaler Ausrichtung verwendet werden: Grundlinie, wird der untere Rand des Bildes auf der Textgrundlinie platziert.
( Quelle: MDN , Schwerpunkt Mine )

Da Browser standardmäßig die vertikale Ausrichtungseigenschaft an der Grundlinie berechnen, ist dies das Standardverhalten. Das folgende Bild zeigt, wo sich die Grundlinie im Text befindet:

( Bildquelle )

An der Grundlinie ausgerichtete Elemente müssen Platz für die Abseilgeräte halten , die sich unterhalb der Grundlinie erstrecken (wie j, p, g ...im obigen Bild). In dieser Konfiguration ist der untere Rand des Bildes 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 wird durch das Standardverhalten des <img>Tags eine Lücke am unteren Rand des Containers erstellt, und durch Ändern der vertikalen Ausrichtungseigenschaft oder der Anzeigeeigenschaft wird diese wie in der folgenden Demo entfernt:

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>

Man kann auch die Zeilenhöhe der Eltern aufheben:

#wrapper {
  line-height: 0;
}

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

Sie müssen lediglich diese Eigenschaft zuweisen:

img {
    display: block;
}

Die Bilder haben standardmäßig diese Eigenschaft:

img {
    display: inline;
}

Sie können verschiedene Methoden für dieses Problem wie verwenden

1. Verwenden von line-height

   #wrapper {  line-height: 0px;  }

2. Verwenden von display: flex

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

3. Mit display: block, table, flexundinherit

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

Ich habe verwendet line-height:0und es funktioniert gut für mich.

Ich fand es großartig mit display: block; auf dem Bild und vertikal ausrichten: oben; auf den Text.

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

oder Sie können den Code einer JS-FIDDLE bearbeiten

Ich habe gerade float:leftzu div hinzugefügt und es hat funktioniert