Mengapa Elemen Blok Sebaris Melimpahi Bekasnya Walaupun `bersaiz kotak: kotak sempadan`?

Bekas Terlebih Pemasangan Kotak Sebaris-Blok

Dalam CSS, elemen blok sebaris secara semula jadi diberikan dengan jarak tambahan. Ini boleh menyebabkan limpahan atau pembalutan dalam bekas yang tidak dijangka.

Pertimbangkan contoh berikut:

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
}

.box {
  display: inline-block; 
  box-sizing:border-box;
  width:25%;
  border:2px solid blue;
  height:100%;
}

<div class="ok">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Walaupun menetapkan saiz kotak: kotak sempadan, elemen blok sebaris dalam bekas tidak muat dengan kemas. Ini kerana jarak lalai antara elemen sebaris, termasuk pemisah baris, menghasilkan ruang mendatar tambahan.

Untuk menyelesaikan masalah ini, seseorang boleh menghapuskan ruang kosong antara elemen dalam sumber HTML:

<div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div>

Ini memastikan bahawa tiada jarak tambahan antara elemen blok sebaris, membolehkan ia dimuatkan dengan betul dalam bekasnya.

Atas ialah kandungan terperinci Mengapa Elemen Blok Sebaris Melimpahi Bekasnya Walaupun `bersaiz kotak: kotak sempadan`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!