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

503

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>

Bild mit einer Lücke oder einem Leerraum darunter

Mischa Moroshko
quelle
10
Hier ist eine kurze und vollständige Antwort auf diese Frage: stackoverflow.com/a/31445364/3597276
Michael Benjamin
1
Hier ist eine gute Lektüre zu diesem Thema: Die seltsame <img> Lücke in HTML
Matheus Avellar

Antworten:

601

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.

Demonstration von Nachkommen

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

QUentin
quelle
9
Genauer gesagt nehmen b / c Inline-Elemente den Raum ihres Stroms ein line-height. Das Einstellen line-heightder gewünschten Dimension würde auch das unerwünschte Leerzeichen überwinden.
Kevin Boucher
3
Qualifiziert sich "f" als Nachkomme?
j08691
2
@ j08691 - Abhängig von der Schriftart.
Quentin
134

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

Thea
quelle
4
Vielen Dank. Dies behebt auch ein ähnliches Problem mit dem Speicherplatz unter einem Flash-Film. (Anzeige hinzugefügt: Block zum Einbetten / Objekt-Tags)
Jessieloo
5
oder inline-blockwenn Sie weiterhin möchten, dass es wie normalerweise inline angezeigt wird.
Ian
6
@Ian @Imperative inline-blockscheint nicht zu funktionieren.
p.matsinopoulos
93

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:


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:

Position der Grundlinie im Text ( 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>

Web-Tiki
quelle
Aus diesem Grund funktioniert das Festlegen der Schriftgröße auf 0 nicht. oder doch?
Persijn
2
@Persijn tut es. Wie das Einstellen, line-height:0;aber ich halte dies nicht für eine gute Problemumgehung im Vergleich zum Ändern der vertikalen Ausrichtung oder der Anzeigeeigenschaften
Web-Tiki
2
Beachten Sie jedoch, dass einige Browser dies nicht berücksichtigen font-size:0: Sie setzen die Schriftgröße in den Benutzereinstellungen auf die Mindestgröße.
Herr Lister
Ja, es scheint ein weißer Raum zu sein.
Mrbengi
Nun, ich denke, die middle text-top sub superPosition auf dem Bild ist nicht richtig.
Xianshenglu
40

Man kann auch die Zeilenhöhe der Eltern aufheben:

#wrapper {
  line-height: 0;
}

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

Pavlo
quelle
5
WARNUNG! Dadurch werden auch alle Textknoten im #wrapper gelöscht. wie es geerbt wird. Aber Bonuspunkte für diesen großartigen Geiger! hier wird es mit Textknoten aktualisiert. jsfiddle.net/FaPFv/30
gcb
Alternativ Schriftgröße: 0
Kiran
13

Sie müssen lediglich diese Eigenschaft zuweisen:

img {
    display: block;
}

Die Bilder haben standardmäßig diese Eigenschaft:

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

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;  }
Santosh Khalse
quelle
Bitte empfehlen Sie den sehr schlampigen line-heightHack nicht und machen Sie zumindest nicht klar, warum dies die schlechteste "Lösung" von allen ist: Sobald jemand Text neben das Bild setzt (insbesondere vorformatierte Mehrzeilen mit BR-Tags), werden sie wird sich in einer schlimmeren Situation befinden, als sie begonnen haben.
Gr.
5

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

Abdulla Khan
quelle
Entschuldigung, -1: Das <BR>vermasselt die Textpositionierung . Wenn also jemand neben dem Bild auch Text (z. B. mehrzeilig, z. B. mit ) einfügt, liegt ein falsch positioniertes, überlappendes / überhängendes Durcheinander vor.
Gr.
3

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

Timothy
quelle
-1

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

TomoMiha
quelle
9
Dies ist, weil Einstellung float:leftUrsachendisplay:block
Kevin Boucher