Mengapa Terdapat Jurang Antara Blok Sebaris Walaupun `white-space: nowrap`?

Cara Menghapuskan Ruang Antara Blok Sebaris dengan ruang putih: nowrap

Apabila cuba menjajarkan berbilang elemen blok secara mendatar tanpa pemisah baris, menggunakan ruang putih: nowrap selalunya menghasilkan jurang yang kecil. Isu yang membingungkan ini boleh dikaitkan dengan aksara ruang putih, termasuk pemisah baris dan tab, yang ditafsirkan sebagai ruang antara elemen sebaris.

Penyelesaian:

1. Komen Keluar Ruang Putih:

Alih keluar aksara ruang kosong dengan meletakkan ulasan HTML secara strategik:

<div>

2. Jidar Negatif:

Perkenalkan jidar negatif kepada unsur, memaksanya lebih rapat:

#container1 div {
  margin-right: -2px;
}

3. Pecahkan Teg Penutup:

Pecahkan teg penutup setiap elemen ke baris baharu:

<div>

Kaedah Tambahan:

• Minimumkan HTML: Alih keluar ruang kosong yang tidak diperlukan daripada HTML kod.
• Tetapkan Saiz Fon Ibu Bapa kepada Sifar: Tetapkan semula saiz fon elemen induk kepada sifar dan kemudian tetapkannya semula untuk kanak-kanak.
• Apung Sebaris Item: Apungkan elemen sebaris ke kiri atau kanan.
• Gunakan Flexbox: Gunakan sistem susun atur Flexbox untuk kawalan penjajaran lanjutan.

Topik Serupa:

• Mengapa terdapat jurang antara imej dan bar navigasi?
• Bagaimana untuk mengalih keluar ruang antara blok sebaris elemen?
• Ruang antara Item Senarai Blok Sebaris
• Bagaimana untuk mengalih keluar "Ruang tidak kelihatan" daripada HTML

Atas ialah kandungan terperinci Mengapa Terdapat Jurang Antara Blok Sebaris Walaupun `white-space: nowrap`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!