Warum ist im folgenden Code die Höhe von div
größ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>
Antworten:
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:
vertical-align
Bild an, um es an einer anderen Stelle zu positionieren (z. B.middle
) oderdisplay
damit es nicht inline ist.Das enthaltene Bild ist gemeinfrei und stammt von Wikimedia Commons
quelle
line-height
. Das Einstellenline-height
der gewünschten Dimension würde auch das unerwünschte Leerzeichen überwinden.Eine weitere hier vorgeschlagene Option ist das Festlegen des Bildstils als
style="display: block;"
quelle
inline-block
wenn Sie weiterhin möchten, dass es wie normalerweise inline angezeigt wird.inline-block
scheint nicht zu funktionieren.Schnelle Lösung:
Um die Lücke unter dem Bild zu entfernen , können Sie:
vertical-align: bottom;
vertical-align: top;
oder einvertical-align: middle;
display:block;
Eine Live-Demo finden Sie im folgenden Code:
Code-Snippet anzeigen
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,
inline
geben ihnen jedoch ein spezielles Verhalten, das sie näher aninline-block
Elementen heranführt (da Sie sie vertikal ausrichten können, geben ihnen eine Höhe, oberer / unterer Rand und Polsterung, transformiert ...).Dies bedeutet auch, dass:
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: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:quelle
line-height:0;
aber ich halte dies nicht für eine gute Problemumgehung im Vergleich zum Ändern der vertikalen Ausrichtung oder der Anzeigeeigenschaftenfont-size:0
: Sie setzen die Schriftgröße in den Benutzereinstellungen auf die Mindestgröße.middle
text-top
sub
super
Position auf dem Bild ist nicht richtig.Man kann auch die Zeilenhöhe der Eltern aufheben:
Alle Korrekturen: http://jsfiddle.net/FaPFv/
quelle
Sie müssen lediglich diese Eigenschaft zuweisen:
Die Bilder haben standardmäßig diese Eigenschaft:
quelle
Sie können verschiedene Methoden für dieses Problem wie verwenden
Verwenden von
line-height
Verwenden von
display: flex
Mit
display:
block
,table
,flex
undinherit
quelle
line-height
Hack 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.Ich habe verwendet
line-height:0
und es funktioniert gut für mich.quelle
<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.Ich fand es großartig mit display: block; auf dem Bild und vertikal ausrichten: oben; auf den Text.
oder Sie können den Code einer JS-FIDDLE bearbeiten
quelle
Ich habe gerade
float:left
zu div hinzugefügt und es hat funktioniertquelle
float:left
Ursachendisplay:block