خصوصیت column-gap

مثال

مشخص کردن فاصله یا شکاف 40 پیکسلی بین ستون ها:

div
{
column-gap:40px;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
}

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

    

مروگرهای Internet Explorer 10 و Opera خاصیت column-gap را پشتیبانی می کنند.

مرورگر Fitefox خاصیت جایگزین moz-column-gap- را پشتیبانی می کند.

مرورگرهای Safari و Chrome خاصیت جایگزین webkit-column-gap- را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، خاصیت column-gap را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خاصیت column-gap می توانیم میزان فاصله (شکاف) بین هر دوستون را مشخص کنیم.

توجه: اگر خط کشی بین ستون ها بود، آن در وسط فاصله (شکاف) بین دو ستون قرار می گیرد. 

مقدار پیشفرض normal
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.columnGap="40px"

نحوه استفاده

column-gap: length|normal;
مقدار توضیحات نمایش دادن
length

مقداری مشخص که فاصله یا شکاف بین دو ستون را مشخص می نماید.
normal یک فاصله نرمال بین ستون ها مشخص می کند. W3C مقدار 1em را پیشنهاد می دهد.

مثال - خودتان امتحان کنید

Column-count

متن داخل عنصر div را به سه ستون تقسیم می کند.

Column-gap

متن داخل عنصر div را به سه ستون تقسیم می کند که فاصله بین هر ستون با دیگری 30 پیکسل است.

Column-rule

عرض، استایل و رنگ خط کشی که بین هر دو ستون قرار دارد را مشخص می کند.