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

Anomali Margin Imej HTML 5: Penyelesaian Didedahkan

Dalam HTML 5, isu pelik timbul apabila imej yang disertakan dalam elemen DIV memaparkan yang tidak dapat dijelaskan Margin bawah 3px, walaupun tiada penggayaan CSS yang mewajibkannya. Anomali ini telah membingungkan pembangun, mengganggu reka letak yang dimaksudkan untuk halaman web mereka.

Punca asas tingkah laku ini berpunca daripada imej yang dipaparkan sebagai aksara teks. Oleh itu, ia bertindak seperti teks, meninggalkan ruang di bawahnya untuk menampung aksara tergantung seperti "y" atau "g." Untuk membetulkan perkara ini, kami mesti menggunakan sifat CSS jajaran menegak untuk menunjukkan dengan jelas bahawa tiada ruang sedemikian diperlukan.

Julat nilai jajaran menegak yang luas boleh menangani isu ini dengan berkesan; namun, untuk tujuan estetik, "tengah" ialah pilihan yang popular. Dengan memasukkan ini:

img {
    vertical-align: middle;
}

ke dalam CSS anda, anda boleh menghapuskan margin bawah 3px yang tidak diingini daripada imej dalam elemen DIV. Penyelesaian ini menghapuskan anomali, memulihkan reka letak halaman web anda yang dimaksudkan.

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