it-swarm.com.de

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

Warum ist in folgender 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 kein Abstand/Rand zu sein.

Wie groß ist die Lücke oder der zusätzliche Abstand 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>

Image with a gap or white space under it

445
Misha Moroshko

Standardmäßig wird ein Bild wie ein Buchstabe inline gerendert.

Es befindet sich in derselben Zeile, in der a, b, c und d sitzen.

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

Sie können die vertical-align des Bildes, um es an einer anderen Stelle zu positionieren (z. B. im middle) oder das display so zu ändern, dass es nicht inline ist.

525
Quentin

Eine andere vorgeschlagene Option hier setzt den Stil des Bildes als style="display: block;"

126
Thea

Schnelle Lösung:

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

  • Setze die vertical-align Eigenschaft des Bildes auf vertical-align: bottom;vertical-align: top; oder 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>

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 durch Elemente ersetzt werden ( siehe MDN und W3C). Dies ermöglicht es ihnen, sich wie ein Bild zu verhalten und ihre eigenen Dimensionen und Seitenverhältnisse zu haben.
Browser berechnen ihre Anzeigeeigenschaft zu inline, geben ihnen jedoch ein spezielles Verhalten, das sie näher an inline-block Elemente (wie Sie sie vertikal ausrichten können, geben Sie ihnen eine Höhe, oberen/unteren Rand und Polsterung, transformiert ...).

Dies bedeutet auch, dass:

[...] Wenn Bilder in einem Inline-Formatierungskontext mit vertikaler Ausrichtung verwendet werden: Grundlinie , wird der untere Rand des Bildes auf der Grundlinie des Containers positioniert . ( source: MDN , Betonung meiner)

Dies ist das Standardverhalten, da Browser standardmäßig die Eigenschaft für die vertikale Ausrichtung an der Basislinie berechnen. Das folgende Bild zeigt, wo sich die Grundlinie im Text befindet:

Location of the baseline on text

An der Grundlinie ausgerichtete Elemente müssen Platz für die nterläufe bieten, die sich unterhalb der Grundlinie erstrecken (wie j, p, g ...) wie Sie im obigen Bild sehen können. In dieser Konfiguration wird der untere Rand des Bildes an der Grundlinie ausgerichtet , wie Sie in diesem Beispiel sehen können:

div{border:1px solid red;}
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 des <img>-Tag erstellt eine Lücke am unteren Rand des Containers. Durch Ändern der Vertical-Align-Eigenschaft oder der Display-Eigenschaft 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>
85
web-tiki

Man kann auch die Zeilenhöhe der Eltern aufheben:

#wrapper {
  line-height: 0;
}

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

37
Pavlo

Sie müssen lediglich diese Eigenschaft zuweisen:

img {
    display: block;
}

Die Bilder haben standardmäßig diese Eigenschaft:

img {
    display: inline;
}
9
Daniel Díaz

Sie können für dieses Problem verschiedene Methoden anwenden, z

  1. Mit line-height

    #wrapper {  line-height: 0px;  }
    
  2. Mit display: flex

    #wrapper {  display: flex;         }
    #wrapper {  display: inline-flex;  }
    
  3. Mit display:block, table, flex und inherit

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

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

4
Abdulla khan

Ich fand es funktioniert gut 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 a JS FIDDLE bearbeiten

3
Timothy