Properti celah CSS
Contoh
Atur jarak antara baris dan kolom menjadi 50px:
.grid-container {
gap: 50px;
}
Definisi dan Penggunaan
Properti gap
menentukan ukuran celah antara baris dan kolom. Ini adalah singkatan untuk properti berikut:
Catatan: Properti gap
ini sebelumnya dikenal sebagai .
grid-gap
Nilai bawaan: | biasa biasa |
---|---|
Diwarisi: | tidak |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | Modul Penyelarasan Kotak CSS Level 3 |
Sintaks JavaScript: | objek .style.gap="50px 100px" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
gap (in Multiple Columns) | 66 | 16 | 61 | Not supported | 53 |
gap (in Grid) | 66 | 16 | 61 | 10.1 | 53 |
gap (in Flexbox) | 84 | 84 | 63 | Not supported | 70 |
Sintaks CSS
gap: row-gap column-gap;
Nilai properti
Value | Description | Play it |
---|---|---|
row-gap | Sets the size of the gap between the rows in a grid layout | |
column-gap | Sets the size of the gap between the columns in a grid layout |
Lebih Banyak Contoh
Contoh
Atur jarak antara baris ke 20px, dan kolom ke 50px:
.grid-container {
gap: 20px 50px;
}
Halaman Terkait
Tutorial CSS: Tata Letak Kotak CSS
Referensi CSS: Properti celah baris
Referensi CSS: Properti celah kolom