Bagaimanakah CSS Boleh Menghapuskan Ruang Putih Antara Imej?

Menghilangkan Jurang Antara Imej dengan CSS

Dalam bidang pembangunan web, kehadiran ruang kosong antara imej boleh menjadi gangguan estetik . Untuk menangani perkara ini, pelbagai kaedah telah digunakan, seperti menggunakan ruang tanpa putus, meletakkan komen HTML secara strategik, atau memperkenalkan pemisah baris. Tetapi adakah terdapat cara yang lebih elegan dan cekap untuk menghapuskan jurang ini dengan hanya CSS?

Kuasa Paparan: Sekat

Jawapannya terletak pada pemahaman sifat paparan lalai daripada imej HTML. Secara lalai, imej ialah elemen sebaris, bermakna ia tidak memulakan baris baharu dan boleh duduk bersebelahan. Untuk memecahkan tingkah laku ini dan mengalih keluar ruang putih, kita boleh menetapkan sifat paparan untuk menyekat:

img {
  display: block;
}

Pelaksanaan dan Kesan

Dengan menggunakan peraturan CSS ini pada imej bekas, imej akan bertindak sebagai elemen peringkat blok. Ini bermakna mereka akan menduduki lebar penuh bekas dan menyusun secara menegak, menghapuskan sebarang jarak mendatar di antara mereka. Kod berikut menunjukkan ini:

<code class="HTML"><div class="image-container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
</div></code>

<code class="CSS">.image-container img {
  display: block;
}</code>

Voilà! Ruang antara imej akan hilang, meninggalkan anda dengan aliran imej yang lancar.

Atas ialah kandungan terperinci Bagaimanakah CSS Boleh Menghapuskan Ruang Putih Antara Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!