Rumah > hujung hadapan web > tutorial css > Mengapa Margin Tidak Berfungsi pada Sel Jadual CSS, dan Bagaimana Saya Boleh Menambah Jarak Sebaliknya?

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

DDD
Lepaskan: 2024-12-07 14:25:13
asal
731 orang telah melayarinya

Why Doesn't Margin Work on CSS Table Cells, and How Can I Add Spacing Instead?

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>

<div>
Salin selepas log masuk

< ;/div>

CSS:
.table {

display: table;
border-collapse: separate;
border-spacing: 5px;
Salin selepas log masuk

}
.baris {

display: table-row;
Salin selepas log masuk

}
.sel {

display: table-cell;
padding: 5px;
border: 1px solid black;
Salin selepas log masuk

}

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

Atas ialah kandungan terperinci Mengapa Margin Tidak Berfungsi pada Sel Jadual CSS, dan Bagaimana Saya Boleh Menambah Jarak Sebaliknya?. 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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan