Mengapa Dua Elemen Blok Sebaris Lebar 50% Tidak Sesuai Bersebelahan?

Dua Elemen Blok Sebaris dengan Lebar 50% Gagal Muat Bersebelahan dalam Baris: Mengapa?

Apabila menggunakan blok sebaris elemen, terdapat isu yang wujud dengan ruang putih di antara mereka (lebih kurang 4px lebar). Ini bermakna dua div dengan lebar 50% setiap satu, ditambah ruang putih ini, melebihi lebar 100%, menyebabkan ia terkeluar daripada baris tunggal yang dimaksudkan.

Contoh:

body {
  margin: 0;
}

div {
  display: inline-block;
  width: 50%;
}

.left {
  background-color: aqua;
}

.right {
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Sebab Ruang Putih Isu:

• Runtuh Margin: Margin elemen sebaris tidak bergabung atau runtuh; sebaliknya, ia mewujudkan ruang kecil antara elemen.
• Jarak antara Elemen Sebaris: Penyemak imbas biasanya menambah jurang 4px antara elemen sebaris jika tiada pelapik atau jidar ditentukan.

Penyelesaian Alternatif:

Semasa menetapkan satu div hingga 49% lebar boleh menyelesaikan isu jurang, ia bukan amalan yang ideal. Alternatif termasuk:

• Apung: Elemen terapung mengalih keluar isu jurang sebaris, tetapi menjejaskan penjajaran menegak.
• Flexbox: Menggunakan flexbox membenarkan untuk kawalan susun atur yang lebih tepat dan mengelakkan ruang kosong isu.
• Grid CSS: Reka letak Grid CSS moden menyediakan pendekatan berasaskan grid untuk mengawal kedudukan elemen, menghapuskan keperluan untuk elemen blok sebaris dan kebimbangan jaraknya.

Atas ialah kandungan terperinci Mengapa Dua Elemen Blok Sebaris Lebar 50% Tidak Sesuai Bersebelahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!