Mengapa Imej Blok Sebaris Mempunyai Ruang Tidak Diingini Di Bawahnya?

Menghapuskan Ruang Yang Tidak Diingini Di Bawah Imej Blok Sebaris

Dalam pembangunan web, mencapai imej blok sebaris yang diletakkan dengan lancar dalam pembungkus boleh menjadi mencabar . Kadangkala, jurang muncul di bawah imej, meninggalkan estetik yang tidak sedap dipandang. Isu ini timbul daripada gelagat lalai elemen blok sebaris, yang sememangnya menyimpan ruang di bawahnya.

Mekanisme Asas

Punca utama terletak pada model kotak CSS. Elemen blok sebaris, seperti imej, membentuk kotak segi empat tepat yang merangkumi kandungan, padding, jidar dan jidar. Secara lalai, apabila elemen blok sebaris mengandungi baris kosong selepasnya, penyemak imbas mentafsir ini sebagai baris baharu dan mencipta jurang yang sepadan dalam reka letak.

Penyelesaian: Penjajaran Menegak

Untuk mengalih keluar ruang yang tidak diingini, adalah perlu untuk mengubah suai penjajaran menegak imej. Dengan menetapkan sifat CSS jajar menegak ke atas, imej akan dijajarkan ke tepi atas bekas blok sebaris, menghapuskan jurang.

Kod CSS:

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

Contoh:

Pertimbangkan HTML dan CSS berikut:

<code class="html"><div id="wrapper">
    <img src="image.jpg">
</div></code>

<code class="css">#wrapper {
    background:green;
}

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

Hasil:

Dengan menggunakan sifat jajar menegak, imej kini akan muat dengan kemas dalam pembalut, tanpa ruang yang kelihatan di bawahnya.

Atas ialah kandungan terperinci Mengapa Imej Blok Sebaris Mempunyai Ruang Tidak Diingini Di Bawahnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!