Mengapa Margin Tidak Berfungsi pada Elemen Sel Meja?

Mengapa Margin Gagal pada Elemen Sel Jadual?

Walaupun memberikan margin: 5px kepada elemen div bersebelahan dengan paparan: sel jadual, tiada jidar muncul. Apakah sebabnya?

Memahami Punca

Menurut dokumentasi MDN, sifat margin mengecualikan elemen dengan jenis paparan jadual kecuali kapsyen jadual, jadual dan jadual sebaris. Oleh itu, margin tidak berkesan pada elemen dengan paparan: sel jadual.

Menyelesaikan Isu

Daripada menggunakan margin, pertimbangkan untuk menggunakan sifat jarak sempadan. Sifat ini digunakan pada elemen induk dengan paparan: reka letak jadual dan runtuhan sempadan: berasingan.

Kod Contoh

HTML

<div class="table">
  <div class="row">
    <div class="cell">123</div>
    <div class="cell">456</div>
    <div class="cell">879</div>
  </div>
</div>

CSS

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 5px;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
}

Menyesuaikan Margin Nilai

Sifat jarak sempadan juga boleh mengambil dua nilai, membenarkan jidar mendatar dan menegak yang berbeza.

.table {
  /* ... */
  border-spacing: 3px 5px; /* 3px horizontally, 5px vertically */
}

Atas ialah kandungan terperinci Mengapa Margin Tidak Berfungsi pada Elemen Sel Meja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!