Mengapa Imej HTML5 Saya Mempunyai Margin Bawah 3px Misterius?-tutorial css-php.cn

Mengapa Imej HTML5 Saya Mempunyai Margin Bawah 3px Misterius?

Mary-Kate Olsen

Lepaskan： 2024-12-19 20:24:15

asal

698 orang telah melayarinya

Why Do My HTML5 Images Have a Mysterious 3px Bottom Margin?

HTML5 Enigma: Imej Mempamerkan Margin Tidak Dijangka

Pertimbangkan isu pelik yang dihadapi semasa menukar tapak web kepada HTML5. Tanpa diduga, setiap imej yang disertakan dalam elemen DIV mempamerkan jidar bawah 3px yang tidak dapat dijelaskan, walaupun tiada jidar sedemikian dalam CSS. Walaupun pemeriksaan menyeluruh, punca anomali ini masih sukar difahami.

Manifestasi isu ini menjadi jelas apabila imej diberikan dimensi 50x50 piksel, manakala elemen DIV yang mengandungi (

) telah dikonfigurasikan dengan paparan : meja. Menariknya, dimensi ketinggian .placeholder mencurigakan meningkat kepada 53 piksel.

Menyelesaikan Teka-teki

Penyelesaian kepada tingkah laku yang membingungkan ini terletak pada pemahaman ciri-ciri wujud imej dalam HTML. Secara lalai, imej berkelakuan serupa dengan aksara teks, menyebabkan ruang terpelihara di bawahnya untuk "ekor" hipotesis huruf seperti "y" atau "g." Untuk membetulkan isu ini, sifat CSS penjajaran menegak boleh digunakan untuk menunjukkan ketiadaan jarak menegak tambahan ini.

Pelaksanaan

Untuk menghapuskan margin bawah yang tidak diingini, hanya masukkan peraturan CSS berikut:

img {
    vertical-align: middle;
}

Salin selepas log masuk

Dengan menentukan nilai untuk penjajaran menegak, menegak imej penjajaran dalam elemen induknya dilaraskan, dengan berkesan meneutralkan ruang yang dikhaskan.

Pengesahan Visual

Penyelesaian ini ditunjukkan secara elegan dalam jsFiddle yang dikemas kini: [pautan disediakan].

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