Mengapa Margin Tidak Berfungsi pada Elemen `display: table-cell`?

Elemen Tidak Peka kepada Margin

Masalah

Disediakan dengan paparan divs bersebelahan : sel meja; kekal tidak terjejas oleh sifat margin, walaupun apabila ditetapkan kepada nilai 5px.

Penjelasan

Menurut dokumentasi MDN, sifat margin tidak digunakan pada elemen dengan jenis paparan jadual kecuali kapsyen jadual, jadual dan jadual sebaris. Akibatnya, ia tidak boleh menjejaskan elemen dengan display:table-cell.

Solution

Untuk mencapai jarak antara elemen ini, gunakan sifat jarak sempadan. Walau bagaimanapun, ini memerlukan penggunaan display:table dan border-collapse:separate kepada elemen induk.

Contohnya:

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

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

Dengan menggunakan sifat jarak sempadan dan melaraskan keruntuhan sempadan dan tetapan paparan, anda boleh mencipta jidar antara elemen div yang digayakan sebagai paparan dengan berkesan: table-cell;.

Kefungsian Lanjutan

Seperti yang dinyatakan oleh Diego Quirós, sifat jarak sempadan membolehkan anda menentukan nilai margin yang berbeza untuk paksi mendatar dan menegak . Contohnya:

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

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