Mengapa Margin Tidak Berfungsi pada div dengan `display: table-cell;`?

Mengapa tidak boleh div dengan "display: table-cell;" Gunakan Margin?

Dalam HTML, div ialah elemen bersebelahan yang boleh disusun menggunakan tetapan reka letak CSS seperti "paparan". Apabila memberikan "display: table-cell;", div ini berkelakuan seperti sel dalam jadual dan mewarisi sifat tertentu. Salah satu sifat sedemikian ialah ketidakberkesanan sifat margin.

Punca: Ketidakserasian dengan "display: table-cell;"

Menurut dokumentasi MDN, margin tidak boleh digunakan untuk elemen dengan jenis paparan jadual selain daripada "kapsyen jadual", "jadual" dan "jadual sebaris". "paparan: sel meja;" berada di bawah pengecualian ini, menjadikannya tidak serasi dengan jidar.

Penyelesaian: Harta Jarak Sempadan

Daripada menggunakan jidar, pertimbangkan untuk menggunakan jarak sempadan untuk mencapai jarak antara div. Walau bagaimanapun, sifat ini mesti digunakan pada elemen induk dengan reka letak "display: table" dan "border-collapse: berasingan".

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

Lihat jsFiddle Demo

Variasi Margin pada Paksi Mendatar dan Menegak

Seperti yang dinyatakan oleh Diego Quieros, jarak sempadan menyokong dua nilai untuk mencipta jidar yang berbeza untuk paksi mendatar dan menegak.

Contoh:

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

Atas ialah kandungan terperinci Mengapa Margin Tidak Berfungsi pada div dengan `display: table-cell;`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!