Rumah > hujung hadapan web > tutorial css > Mengapa Margin Tidak Berfungsi pada Div dengan `display: table-cell;` dan Bagaimana Saya Boleh Menambah Jarak?

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

Linda Hamilton
Lepaskan: 2024-12-06 22:35:12
asal
528 orang telah melayarinya

Why Doesn't Margin Work on Divs with `display: table-cell;` and How Can I Add Spacing?

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>
Salin selepas log masuk

&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!

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