Gambar di dalam div memiliki ruang ekstra di bawah gambar

Mengapa dalam kode berikut ketinggian divlebih besar dari tinggi img? Ada celah di bawah gambar, tetapi sepertinya itu bukan padding / margin.

Apa celah atau ruang ekstra di bawah gambar?

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Secara default, gambar dirender sebaris, seperti huruf sehingga berada pada baris yang sama dengan a, b, c dan d.

Ada ruang di bawah garis itu untuk keturunan yang Anda temukan pada huruf seperti g, j, p dan q.

Kamu bisa:

• sesuaikan vertical-aligngambar untuk menempatkannya di tempat lain (misalnya middle) atau
• ubah displayjadi itu tidak sebaris.

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>

Gambar yang disertakan adalah domain publik dan bersumber dari Wikimedia Commons

Opsi lain yang disarankan di sini adalah mengatur gaya gambar sebagaistyle="display: block;"

Perbaikan cepat:

Untuk menghapus celah di bawah gambar , Anda dapat:

• Setel properti penyejajaran vertikal gambar ke vertical-align: bottom; vertical-align: top;atauvertical-align: middle;
• Setel properti tampilan gambar ke display:block;

Lihat kode berikut untuk demo langsung:

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

Penjelasan: mengapa ada celah di bawah gambar?

Kesenjangan atau ruang ekstra di bawah gambar bukanlah bug atau masalah, itu adalah perilaku default. Penyebab utamanya adalah bahwa gambar adalah elemen yang diganti ( lihat elemen yang diganti MDN ). Ini memungkinkan mereka untuk "bertindak seperti gambar" dan memiliki dimensi intrinsik mereka sendiri, rasio aspek ....
Browser menghitung properti tampilan mereka, inlinetetapi mereka memberi mereka perilaku khusus yang membuatnya lebih dekat ke inline-blockelemen (karena Anda dapat meluruskannya secara vertikal, memberikan mereka tinggi, margin atas / bawah dan bantalan, mengubah ...).

Ini juga berarti bahwa:

<img>tidak memiliki garis dasar, jadi ketika gambar digunakan dalam konteks pemformatan sebaris dengan garis lurus vertikal: garis dasar, bagian bawah gambar akan ditempatkan pada garis dasar teks.
( sumber: MDN , penekanan tambang )

Karena browser secara default menghitung properti penyelarasan vertikal ke baseline, ini adalah perilaku default. Gambar berikut menunjukkan di mana garis dasar berada pada teks:

( Sumber gambar )

Elemen garis dasar perlu menjaga ruang untuk keturunan yang meluas di bawah garis dasar (seperti j, p, g ...) seperti yang Anda lihat pada gambar di atas. Dalam konfigurasi ini, bagian bawah gambar sejajar pada garis dasar seperti yang Anda lihat dalam contoh ini:

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>

Inilah sebabnya mengapa perilaku default <img>tag menciptakan celah di bagian bawah wadahnya dan mengapa mengubah properti perataan vertikal atau properti tampilan menghapusnya seperti dalam demo berikut:

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>

Satu juga dapat membatalkan tinggi garis orangtua:

#wrapper {
  line-height: 0;
}

Semua perbaikan: http://jsfiddle.net/FaPFv/

Yang harus Anda lakukan adalah menetapkan properti ini:

img {
    display: block;
}

Gambar secara default memiliki properti ini:

img {
    display: inline;
}

Anda dapat menggunakan beberapa metode untuk masalah ini seperti

1. Menggunakan line-height

   #wrapper {  line-height: 0px;  }

2. Menggunakan display: flex

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

3. Menggunakan display: block, table, flexdaninherit

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

Saya menggunakan line-height:0dan berfungsi dengan baik untuk saya.

Saya menemukan ini bekerja sangat baik menggunakan tampilan: blok; pada gambar dan luruskan vertikal: atas; pada teks.

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

atau Anda dapat mengedit kode JS FIDDLE

Saya baru saja menambahkan float:leftdiv dan itu berhasil