Mengapa Imej Saya Mempunyai Ruang Tidak Dijangka Di Bawahnya, dan Bagaimana Saya Boleh Membetulkannya?

Imej Memaparkan Ruang Tidak Dijangka Di Bawah: Penjelasan Terperinci

Masalah:

Imej, malah apabila digayakan dengan pelapik dan jidar sifar, selalunya mempamerkan ruang kosong misteri di bawahnya. Ini menyebabkan sempadan imej dijarakkan dari tepi bawah.

Punca:

Imej dianggap sebagai elemen blok sebaris, yang mematuhi peraturan garis dasar dalam tipografi. Garis dasar ialah garis bawah untuk kebanyakan huruf dalam blok teks. Walau bagaimanapun, huruf tertentu, seperti "p" dan "q," memanjang di bawah garis dasar, memerlukan ruang antara garis dasar dan garis bawah untuk mengelakkan pertindihan.

Membetulkan Isu:

Untuk menghilangkan ruang di bawah imej, laraskan penjajaran menegaknya menggunakan yang berikut CSS:

img { vertical-align: bottom; }

Ini menjajarkan imej ke bahagian bawah barisnya, menghapuskan ruang yang tidak diingini.

Potensi Isu dan Penyelesaian:

Imej kecil, bagaimanapun, kini boleh memaparkan ruang di atasnya. Untuk menyelesaikan masalah ini, tambahkan CSS berikut pada elemen bekas:

line-height: 1px;

Ini menetapkan ketinggian garisan kepada nilai minimum, memastikan walaupun imej kecil dijajarkan dengan betul.

Atas ialah kandungan terperinci Mengapa Imej Saya Mempunyai Ruang Tidak Dijangka Di Bawahnya, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!