Mengapa Jarak Menegak Muncul Di Bawah Imej Sekat Sebaris, dan Bagaimana Ia Boleh Dibetulkan?

Menghapuskan Jarak Menegak Di Bawah Imej Blok Sebaris

Dalam pembangunan web, elemen blok sebaris biasanya digunakan untuk menjajarkan imej. Walau bagaimanapun, pengguna sering menghadapi jarak menegak yang tidak diingini di bawah imej ini. Mengapa ini berlaku, dan bagaimanakah kita boleh menyelesaikannya?

Dalam contoh yang diberikan dalam soalan, imej diletakkan di dalam pembungkus berwarna hijau (div). Apabila dipaparkan sebagai blok sebaris, imej muncul di bahagian bawah pembungkus, meninggalkan ruang kosong di atas. Untuk menghapuskan isu ini sambil mengekalkan paparan blok sebaris, kita perlu melaraskan penjajaran menegak imej.

Penyelesaian terletak pada penambahan sifat CSS:

<code class="css">vertical-align: top;</code>

Sifat ini menjajarkan garis dasar menegak imej dengan bahagian atas garisan itu berada. Akibatnya, imej akan diletakkan rata pada bahagian atas pembalut, menghapuskan ruang yang tidak diingini.

Selepas menggunakan sifat jajar menegak, CSS akan kelihatan seperti:

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

Pengubahsuaian ini memastikan imej menempati ketinggian menegak penuh pembalut, menghilangkan ruang kosong dan mempersembahkan reka letak yang dijajarkan secara visual.

Atas ialah kandungan terperinci Mengapa Jarak Menegak Muncul Di Bawah Imej Sekat Sebaris, dan Bagaimana Ia Boleh Dibetulkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!