Imej di dalam div mempunyai ruang tambahan di bawah imej

Question

Mengapakah ketinggian div dalam kod berikut lebih tinggi daripada ketinggian img? Terdapat jurang di bawah imej, tetapi ia tidak kelihatan seperti padding/margin.

Apakah jurang atau ruang tambahan di bawah imej?

#wrapper {
  sempadan: 1px merah pepejal;
  lebar: 200px;
}
img {
  lebar: 200px;
}

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

Answer 1

Pilihan lain yang dicadangkan dalam catatan blog ini ialah menggayakan imej kepada style="display: block;"

Answer 2

Secara lalai, imej dipaparkan sebaris, sama seperti huruf, jadi ia berada pada baris yang sama seperti a, b, c dan d.

Terdapat ruang di bawah garisan untuk huruf g, j, p dan q.

Anda boleh:

• Laraskan vertical-align图像的 将其放置在其他位置（例如中间) atau
• Tukar 显示 supaya tidak lagi 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>