Mengapa Imej HTML5 dalam DIV Kadang-kadang Mempunyai Margin Bawah 3px Misterius?

Memahami Margin 3px Misterius dalam Imej HTML5

Beberapa pengguna telah menemui fenomena yang tidak dijangka di mana imej dalam elemen DIV mempamerkan jidar bawah 3px yang pelik walaupun tiada margin CSS yang jelas. Untuk mendalami anomali ini, mari kita terokai coretan kod yang disediakan:

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

Apabila menetapkan gaya paparan: jadual kepada .placeholder, ketinggian tambahan (53px bukannya 50px) menunjukkan bahawa imej berkelakuan seperti aksara dalam rentetan teks, meninggalkan ruang di bawah untuk huruf tergantung seperti "y" atau "g."

Untuk menyelesaikan isu ini, penjajaran menegak sifat CSS boleh digunakan untuk menunjukkan bahawa tiada ruang sedemikian diperlukan. Seperti yang ditunjukkan dalam blok kod yang disediakan, menetapkan penjajaran menegak: tengah menjajarkan imej secara menegak tanpa meninggalkan sebarang ruang putih tambahan.

Berikut ialah kod yang disemak dengan penyelesaian yang dilaksanakan:

img {
    vertical-align: middle;
}

Dengan menggunakan pelarasan ini, imej akan diselaraskan dengan betul dalam elemen DIV, menghapuskan margin 3px yang membingungkan. Pengguna boleh merujuk pautan jsFiddle yang dilampirkan untuk contoh yang berfungsi:

http://jsfiddle.net/fRpK6/1/

Atas ialah kandungan terperinci Mengapa Imej HTML5 dalam DIV Kadang-kadang Mempunyai Margin Bawah 3px Misterius?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!