Mengapa Item Senarai Blok Sebaris Saya Mempunyai Margin Tidak Diingini Walaupun Dengan `margin: 0`?

Margin Tidak Diingini dalam Item Senarai Blok Sebaris

Masalah

Saya menghadapi isu di mana item senarai yang ditetapkan untuk dipaparkan: sebaris- blok mempunyai margin yang tidak diingini di sekelilingnya, walaupun peraturan CSS untuk margin ditetapkan kepada 0.

HTML:

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

CSS:

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;
}

Penyelesaian

Masalah ini disebabkan oleh paparan: sifat blok sebaris. Berikut ialah dua penyelesaian:

1. Tukar paparan: blok sebaris kepada terapung: kiri:

   • CSS:

     li {
       float: left;
     }

2. Alih keluar ruang kosong antara item senarai:

   • Alih keluar baris baharu antara

   • tag dan sekat tag akhir dan mulakan tag bersama-sama:

     • HTML:

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

Nota:

blok sebaris memaparkan jidar 4px di sebelah kanan setiap elemen. Untuk mengelakkan perkara ini, adalah disyorkan untuk sama ada menggunakan apungan atau elakkan ruang kosong antara item senarai.

Atas ialah kandungan terperinci Mengapa Item Senarai Blok Sebaris Saya Mempunyai Margin Tidak Diingini Walaupun Dengan `margin: 0`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!