Örnek
sütunları arasında bir 40 piksel boşluğu belirtir:
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
kolon boşluğu özelliği sütunlar arasındaki boşluğu belirtir.
Note: sütunlar arasındaki bir sütun-kural varsa, o boşluğu ortasında görünecektir.
Varsayılan değer: | normal |
---|---|
Miras: | no |
canlandırılabilir: | yes. Read about animatable Try it |
Versiyon: | CSS3 |
JavaScript sözdizimi: | object .style.columnGap="50px" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -moz-.
özellik | |||||
---|---|---|---|---|---|
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 sözdizimi
column-gap: Mülkiyet Değerler değer Açıklama Oynat length sütunlar arasındaki boşluğu ayarlamak olacak bir belirtilen uzunluk Oynat " normal Varsayılan değer. sütunları arasında normal bir boşluğu belirler. W3C 1em değeri önerir Oynat " initial varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun Oynat " inherit üst öğesinden bu özelliği devralır. Yaklaşık miras oku
Diğer Örnekler
Kolon-sayımı
Bir metni bölün <div> üç sütun halinde element:
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Kendin dene "
Kolon-kural
sütunlar arasındaki kuralın genişliği, stil ve renk belirtin.
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;
}
Kendin dene "
İlgili Sayfalar
CSS3 öğretici: CSS3 Çoklu Sütunlar
HTML DOM referansı: columnGap property