Mengapa Imej Sekat Sebaris Mempunyai Ruang Tambahan Di Bawahnya, dan Bagaimana Saya Boleh Membetulkannya?

Ruang Misteri di bawah Imej: Membongkar Punca dan Penyelesaian

Apabila memaparkan imej sebagai elemen blok sebaris, anda mungkin menghadapi senario yang membingungkan di mana ruang kosong kelihatan di bawahnya, walaupun menetapkan pelapik dan jidar kepada sifar. Fenomena yang membingungkan ini berpunca daripada gelagat wujud elemen blok sebaris, yang menyerupai aksara dalam teks.

Sama seperti huruf mempunyai garis dasar yang menandakan garis bawah aksara, imej sejajar dengan garis dasar ini. Akibatnya, walaupun tanpa teks mengapit, imej itu diselaraskan dengan garis dasar, menyebabkan jurang di bawah disebabkan oleh ruang yang dikhaskan untuk menggantung ekor pada huruf seperti 'p' dan 'q'.

Untuk membetulkannya, kita boleh memanfaatkan kuasa vertical-align:bottom. Sifat CSS ini melabuhkan imej ke bahagian bawah baris, dengan berkesan mengalih keluar ruang putih yang berlarutan.

img {
    vertical-align:bottom;
}

Untuk imej yang lebih kecil daripada ketinggian garisan, tweak halus diperlukan. Memperkenalkan line-height:1px pada elemen kontena menghapuskan sebarang kemungkinan pencerobohan ruang di atas imej.

Menggunakan pelarasan mudah ini memastikan imej terletak dengan kemas dalam ruang yang diperuntukkan, tanpa kehadiran kawasan kosong yang membingungkan di bawahnya.

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