Contoh
Tentukan gap 40 piksel antara kolom:
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Properti kolom-gap menentukan kesenjangan antara kolom.
Note: Jika ada kolom-aturan antara kolom, maka akan muncul di tengah-tengah celah.
| nilai default: | normal |
|---|---|
| mewarisi: | no |
| animatable: | yes. Read about animatable Try it |
| Versi: | CSS3 |
| sintaks JavaScript: | object .style.columnGap="50px" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit- atau moz menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| column-gap | 50,0 4.0 -webkit- | 10,0 | 2.0 moz | 9.0 3.1 -webkit- | 37.0 15,0 -webkit 11.1 |
CSS Syntax
column-gap:length|normal|initial|inherit;Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| length | Sebuah panjang tertentu yang akan mengatur kesenjangan antara kolom | Mainkan " |
| normal | nilai default. Menentukan kesenjangan normal antara kolom. W3C menunjukkan nilai 1em | Mainkan " |
| initial | Set properti ini ke nilai default. Baca tentang awal | Mainkan " |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Contoh lebih
Kolom-count
Membagi teks dalam <div> elemen menjadi tiga kolom:
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Cobalah sendiri " Kolom-aturan
Tentukan lebar, gaya dan warna aturan antara kolom.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome,
Safari, Opera */
-moz-column-rule: 4px outset #ff00ff;
/* Firefox */
column-rule: 4px outset #ff00ff;
}
Cobalah sendiri " Pages terkait
CSS3 tutorial: CSS3 Beberapa Kolom
Referensi HTML DOM: columnGap property