Imej di dalam div mempunyai ruang tambahan di bawah imej
P粉523335026
P粉523335026 2023-08-29 12:46:39
0
2
533
<p>Mengapakah ketinggian <code>div</code> dalam kod berikut lebih tinggi daripada ketinggian <code>img</code>? Terdapat jurang di bawah imej, tetapi ia tidak kelihatan seperti padding/margin. </p> <p><strong>Apakah jurang atau ruang tambahan di bawah imej? </strong></p> <p><br /></p> <pre class="brush:css;toolbar:false;">#wrapper { sempadan: 1px merah pepejal; lebar: 200px; } img { lebar: 200px; }</pre> <pre class="brush:html;toolbar:false;"><div id="wrapper"> <img src="http://i.imgur.com/RECDV24.jpg" /> </div></pre> <p><br /></p>
P粉523335026
P粉523335026

membalas semua(2)
P粉909476457

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

P粉222320176

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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan