Mengapa Imej HTML5 Saya Mempunyai Margin Bawah 3px Walaupun Tiada CSS Eksplisit?

Anomali Imej HTML 5: Isu Margin Bawah Tidak Dijelaskan

Apabila menggunakan HTML 5, pengguna mungkin menghadapi isu yang membingungkan di mana imej dibalut dengan elemen DIV mempamerkan margin bawah 3px yang tidak dapat dijelaskan. Anomali ini berterusan walaupun tiada definisi margin yang jelas dalam CSS. Sebagai contoh, pertimbangkan struktur HTML berikut:

<div class="placeholder">
    <img src="/static/imghwm/default1.png" data-src="/haha.jpg" class="lazy" alt="">
</div>

Dengan .placeholder DIV yang mempunyai gaya paparan: jadual, dimensi imej kekal pada 50x50px. Walau bagaimanapun, .pemegang tempat DIV secara misteri mengembang secara menegak kepada 53px. Tingkah laku yang tidak dijangka ini telah membingungkan ramai pembangun yang mencari penyelesaian.

Penyelesaian: Penjajaran Menegak

Punca anomali ini terletak pada perlakuan imej sebagai aksara teks, yang mengakibatkan ruang yang tidak diperlukan di bawahnya sama seperti yang diduduki oleh turunan huruf seperti "y" atau "g." Untuk membetulkan ini, sifat penjajaran menegak CSS memastikan tiada ruang sedemikian diperuntukkan. Hampir mana-mana nilai untuk penjajaran menegak sudah memadai, dengan pertengahan menjadi pilihan popular.

img {
    vertical-align: middle;
}

Melaksanakan penyelesaian ini dengan berkesan menghapuskan jidar bawah 3px dan menyelesaikan isu paparan imej. Seperti yang digambarkan dalam jsFiddle yang dikemas kini, imej dan DIV sekelilingnya kini memaparkan dimensi yang dimaksudkan tanpa ruang kosong yang aneh di bawah imej.

Atas ialah kandungan terperinci Mengapa Imej HTML5 Saya Mempunyai Margin Bawah 3px Walaupun Tiada CSS Eksplisit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!