Cara Menggunakan Property CSS border-spacing

Properti border-spacing digunakan untuk menentukan jarak antara batas sel perbatasan yang berdekatan.

Ini juga digunakan untuk menentukan (atau menambah) jarak antara batas tabel dan batas sel di tepi tabel (sel milik baris dan kolom pertama dan terakhir).

Dibutuhkan satu atau dua nilai panjang yang menentukan jarak vertikal dan horizontal. Jika satu nilai ditentukan, ini memberikan jarak vertikal dan horizontal. Jika dua nilai ditentukan, yang pertama memberikan jarak horizontal dan yang kedua memberikan jarak vertikal.

Ketika nilai properti penskalaan perbatasan digunakan untuk menentukan jarak antara batas tabel dan sel di tepinya, penspasi ditambahkan ke padding apa pun yang diterapkan pada tabel. Jarak antara batas tabel dan batas sel di tepi tabel adalah padding tabel untuk sisi itu, ditambah jarak jarak perbatasan yang relevan. Misalnya, di sisi kanan, jaraknya adalah nilai padding-right tabel plus jarak perbatasan horizontal.

Trivia & Catatan

Properti border-spacing hanya berlaku ketika nilai properti border-collapse terpisah, karena jika tidak, jika perbatasan diciutkan dengan nilai runtuh, tidak akan ada spasi di antara perbatasan.

Official Syntax

border-spacing: <length> <length>? | inherit

Berlaku untuk element: table dan inline-table

Value

<length> <length>?
Satu atau dua nilai <length>. (Tanda tanya menunjukkan nilai kedua adalah opsional.) Jika satu nilai ditentukan, ini memberikan jarak vertikal dan horizontal. Jika dua nilai ditentukan, yang pertama memberikan jarak horizontal dan yang kedua memberikan jarak vertikal.

Lihat entri <length> untuk daftar nilai yang mungkin. Nilai negatif tidak diperbolehkan.

inherit
Spasi perbatasan diwarisi dari induk elemen.

Contoh

table {
    border-collapse: separate;
    border-spacing: 1em;
    padding: .5em;
}

 

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published.