Rumah > hujung hadapan web > tutorial css > Mengapa Dua Elemen Blok Sebaris Lebar 50% Tidak Sesuai Bersebelahan?

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

Susan Sarandon
Lepaskan: 2024-12-07 09:47:12
asal
312 orang telah melayarinya

Why Do Two 50% Width Inline-Block Elements Not Fit Side-by-Side?

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;
}
Salin selepas log masuk
<div class="left">foo</div>
<div class="right">bar</div>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan