Mengapa Margin Tidak Berfungsi pada Div dengan `display: table-cell;` dan Bagaimana Saya Boleh Menambah Jarak?

Harta Margin Tidak Menjejaskan Div dengan "display: table-cell;"

Dalam HTML, kita boleh menghadapi senario di mana elemen div dengan "display: table-cell;" kekurangan jarak jangkaan yang diperkenalkan oleh sifat jidar.

Sebab

Sifat jidar tidak serasi dengan unsur yang mempamerkan jenis paparan selain daripada kapsyen jadual, jadual atau jadual sebaris. Malangnya, paparan: sel jadual berada di luar pengecualian ini.

Penyelesaian

Untuk memintas pengehadan ini, pertimbangkan untuk menggunakan sifat jarak sempadan sebagai alternatif. Walau bagaimanapun, adalah penting untuk menggunakan jarak sempadan pada elemen induk yang menampilkan paparan: susun atur jadual, disertai dengan keruntuhan sempadan: berasingan.

HTML

<div>

<div>

&l t;/div>

CSS

.row {display:table-row;}<br>.cell {display:table-cell;padding:5px;border:1px pepejal hitam;}<br>

Dengan persediaan ini, anda boleh menambah jarak antara elemen div.

Margin Mendatar dan Menegak Variasi

Selain itu, sifat jarak sempadan membenarkan nilai margin bebas di sepanjang paksi mendatar dan menegak dengan menyatakan dua nilai yang berbeza.

.../border-spacing:3px 5px;} / 3px secara mendatar, 5px secara menegak /
Atas ialah kandungan terperinci Mengapa Margin Tidak Berfungsi pada Div dengan `display: table-cell;` dan Bagaimana Saya Boleh Menambah Jarak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!