Property column-gap digunakan untuk menentukan jumlah ruang antara kolom yang berdekatan dalam tata letak multi-column. Ini menentukan ruang — atau celah — antara kolom yang dimiliki elemen multi-column yang sama.

Trivia & Catatan

Ketinggian column-gap adalah sama tingginya dengan tinggi column.

Jika ada aturan column di antara column (yang merupakan garis yang ditarik di antara column untuk memisahkannya secara visual), aturan tersebut digambar di tengah celah, dan tidak mengambil ruang apa pun, yang berarti bahwa tidak akan mengambil ruang menambah jumlah ruang antara column yang ditentukan menggunakan celah-column.

Jika lebar dan jumlah column tidak sesuai dengan lebar elemen, browser akan melakukan penyesuaian yang diperlukan dan dapat mengurangi jumlah column agar sesuai dengan lebar column yang ditentukan ke dalam elemen. Celah column juga dapat menyebabkan penyempitan column ke bawah, tergantung pada jumlah ruang yang tersedia.

Official Syntax

 

Values:

  • <length>, Ruang antara kolom yang berdekatan dalam elemen multi-kolom diatur ke nilai yang diberikan. Lihat entri <length> untuk daftar kemungkinan katup. Nilai negatif tidak diperbolehkan.
  • normal, Nilai default. Nilai ini khusus untuk agen pengguna. Nilai 1em disarankan oleh spesifikasi.

Contoh:

Berikut ini akan membuat tata letak tiga kolom di dalam elemen, dan mengatur ruang di antara mereka menggunakan column-gap property.

Berikut ini adalah semua nilai column-gap yang valid: