Mengapa Item Senarai Sekatan Sebaris Mempunyai Margin yang Tidak Diingini, dan Bagaimana Saya Boleh Membetulkannya?

Margin Tidak Diingini dalam Item Senarai Blok Sebaris

Apabila memaparkan elemen blok sebaris dalam senarai, pengguna mungkin menghadapi jidar yang tidak diingini yang mengelilingi item tersebut. Walaupun secara eksplisit menetapkan jidar kepada 0, elemen masih mempamerkan jarak.

Isu ini timbul disebabkan sifat unsur blok sebaris. Unsur blok sebaris mengekalkan aksara ruang putih, termasuk di antara dan di sekeliling elemen. Ini menghasilkan margin 4px di sebelah kanan setiap elemen.

Penyelesaian

Untuk menghapuskan margin yang tidak diingini, pengguna mempunyai dua pilihan:

1. Tukar Sifat Paparan:

   Tukar paparan harta daripada blok sebaris ke terapung: kiri. Kaedah ini akan mengalih keluar jidar berkaitan ruang putih.

2. Teg Elemen Gabungkan:

   Sekat teg penamat dan teg permulaan item senarai bersama-sama . Pendekatan ini mengalih keluar aksara ruang putih yang menyebabkan jidar.

Contoh

Pertimbangkan HTML dan CSS berikut:

<ul>
  <li><div>first</div></li>
  <li><div>first</div></li>
  <li><div>first</div></li>
  <li><div>first</div></li>
</ul>

ul {
  padding: 0;
  border: solid 1px #000;
}
li {
  display: inline-block;
  padding: 10px;
  width: 114px;
  border: solid 1px #f00;
  margin: 0;
}

li div {
  background-color: #000;
  width: 114px;
  height: 114px;
  color: #fff;
  font-size: 18px;
}

Dengan menukar sifat paparan kepada terapung: kiri, margin yang tidak diingini ialah dialih keluar:

li {
  display: float: left;
  ...
}

Sebagai alternatif, menggabungkan teg akan mengalih keluar aksara ruang kosong:

<ul>
  <li><div>first</div></li><li><div>first</div></li><li><div>first</div></li><li><div>first</div></li>
</ul>

Atas ialah kandungan terperinci Mengapa Item Senarai Sekatan Sebaris Mempunyai Margin yang Tidak Diingini, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!