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

Sie können verschiedene Methoden für dieses Problem verwenden, z. B.

1. Verwendung von line-height

   #wrapper {  line-height: 0px;  }

2. Verwendung von display: flex

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

3. Verwendung von display: block , table , flex y inherit

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

Answer 2

Ich habe line-height:0 und bei mir funktioniert es einwandfrei.

Answer 3

Ich habe festgestellt, dass es gut funktioniert, wenn ich display:block; für das Bild und vertical-align:top; für den Text verwende.

.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 bearbeiten und JS FIDDLE

Answer 4

Sie können auch einstellen overflow: hidden; für den Container, und erhöhen Sie die Höhe des Bildes auf > 100%. height: 100%;

Answer 5

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