Mengapa Terdapat Ruang Di Bawah Imej Sekat Sebaris Saya dan Bagaimana Saya Membetulkannya?

Menyelesaikan Ruang Di Bawah Imej Blok Sebaris

Dalam contoh kod anda, anda cuba memaparkan imej sebaris dengan teks menggunakan paparan: sifat blok sebaris, tetapi perhatikan ruang yang tidak diingini di bawah imej. Untuk menangani perkara ini, mari kita mendalami punca dan penyelesaian yang komprehensif.

Pemutus baris yang mengikuti elemen imej mencipta ruang kerana elemen sebaris secara semula jadi menyimpan ruang di bawahnya untuk kandungan teks yang berpotensi. Memandangkan imej tidak mempunyai sebarang kandungan teks, ruang ini kekal kosong dan muncul sebagai jurang yang tidak diingini.

Untuk menghapuskan ruang ini, kita perlu menghapuskan pemisah baris. Satu cara untuk mencapai ini ialah dengan menetapkan sifat penjajaran menegak ke atas untuk imej. Ini akan menjajarkan bahagian atas imej secara menegak dengan garis pangkal teks sekeliling.

<code class="CSS">img {
    display: inline-block; 
    margin: 0;
    vertical-align: top;
}</code>

Dengan pelarasan ini, ruang di bawah imej hilang, membenarkan imej duduk sama dengan kandungan sekeliling. Anda boleh mengesahkan ini dengan mengubah suai kod anda dalam biola yang disediakan: http://jsfiddle.net/dJVxb/4/.

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