column-rule Özelliği

column-rule özelliği, çok sütunlu metinde sütunlar arasına bir kenarlık belirler. Aldığı değerler bakımından border özelliği ile aynıdır.

Örnek . solid Tipi

Bu örnekte, metin 3 sütuna bölünecek ve sütunlar arasında 1px kalınlığında düz çizgi şeklinde kenarlıklar olacaktır (sütunlar arası mesafe otomatik olarak oluşturulacaktır, çünkü column-gap normal değerine ayarlanmıştır):

<div id="elem">
	some long text
</div>

#elem {
	column-rule: 1px solid black;
	column-count: 3;
	column-gap: normal;
	text-align: justify;
}

Örnek . column-gap'ın Etkisi

Bu örnekte, metin 3 sütuna bölünecek ve aralarında 50px boşluk olacaktır. Kenarlık bu boşluğun ortasından geçecektir (kenarlığın sağında ve solunda 25px boşluk olacaktır):

<div id="elem">
	some long text
</div>

#elem {
	column-rule: 1px solid black;
	column-count: 3;
	column-gap: 50px;
	text-align: justify;
}

Ayrıca Bakınız

column-width özelliği,
bir sütunun genişliğini belirler
column-count özelliği,
sütun sayısını belirler
column-gap özelliği,
sütunlar arası boşluğu belirler
column-span özelliği,
bir öğenin kaç sütun boyunca uzaması gerektiğini belirler
columns özelliği,
çok sütunluluk için kısa yazım özelliğidir