Mengapa Imej dalam DIV HTML5 Mempunyai Margin Bawah 3px, dan Bagaimana Saya Boleh Membetulkannya?

Membetulkan Isu Margin Tidak Dijelaskan dengan Imej dalam HTML5

Dalam HTML5, pengguna telah menghadapi isu yang tidak dijangka di mana imej yang disertakan dalam elemen DIV mendapat yang tidak dapat dijelaskan Jidar bawah 3px walaupun tiada definisi CSS yang menyebabkannya. Isu ini telah diperhatikan walaupun apabila ketinggian dan lebar imej dan DIV kedua-duanya ditetapkan kepada 50px.

Untuk menyelesaikan anomali ini, isu ini boleh dikesan kepada imej yang berkelakuan seperti aksara dalam teks, mencipta ruang di bawahnya untuk menggantung aksara seperti "y" atau "g." Penyelesaiannya terletak pada penggunaan sifat CSS penjajaran menegak untuk menunjukkan bahawa tiada ruang sedemikian diperlukan. Sebarang nilai untuk penjajaran menegak sudah memadai, dengan "tengah" menjadi pilihan popular.

Melaksanakan pembetulan ini dalam CSS:

img {
    vertical-align: middle;
}

Dengan memasukkan kod ini, imej akan kehilangan yang tidak diingini margin bawah, menghasilkan tingkah laku yang diharapkan. Untuk demonstrasi praktikal, rujuk jsFiddle yang dikemas kini ini: http://jsfiddle.net/fRpK6/1/.

Atas ialah kandungan terperinci Mengapa Imej dalam DIV HTML5 Mempunyai Margin Bawah 3px, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!