Mengapa Margin Tidak Berfungsi pada Sel Jadual CSS, dan Bagaimana Saya Boleh Menambah Jarak Sebaliknya?

Margin pada Sel Jadual

Dalam CSS, apabila anda menetapkan sifat paparan elemen kepada sel jadual, anda sedang mencipta struktur seperti meja. Walau bagaimanapun, sel jadual tidak terjejas oleh sifat margin. Sifat jidar menetapkan ruang di luar sempadan elemen, tetapi sel jadual tidak mempunyai sempadan secara lalai.

Punca

Menurut Dokumentasi MDN, sifat margin digunakan pada semua elemen kecuali elemen dengan jenis paparan jadual selain daripada kapsyen jadual, jadual dan jadual sebaris. Oleh itu, memandangkan sel jadual bukan salah satu daripada jenis paparan jadual yang dikecualikan, sifat jidar tidak boleh digunakan padanya.

Penyelesaian

Untuk mencapai yang diingini jarak antara sel jadual, sebaliknya gunakan sifat jarak sempadan. Sifat jarak sempadan menetapkan ruang antara sempadan sel jadual bersebelahan. Ia harus digunakan pada elemen induk dengan paparan: susun atur jadual dan sempadan-runtuh: berasingan.

HTML:

<div>
<p>&lt ;/div></p>
<p>CSS:<br>.table {</p>
<pre class="brush:php;toolbar:false">display: table;
border-collapse: separate;
border-spacing: 5px;

}
.baris {

display: table-row;

}
.sel {

display: table-cell;
padding: 5px;
border: 1px solid black;

}
> ;

Perhatikan bahawa jarak sempadan menerima dua nilai untuk menetapkan margin berbeza untuk mendatar dan menegak kapak, jika mahu.