خصوصیت column-gap
مثال (خصوصیت column-gap)
مشخص کردن فاصله یا شکاف 40 پیکسلی بین ستون ها:
{
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" |
نحوه استفاده
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| length |
مقداری مشخص که فاصله یا شکاف بین دو ستون را مشخص می نماید. |
نمایش دادن » |
| normal | یک فاصله نرمال بین ستون ها مشخص می کند. W3C مقدار 1em را پیشنهاد می دهد. | نمایش دادن » |
مثال - خودتان امتحان کنید
متن داخل عنصر div را به سه ستون تقسیم می کند.
متن داخل عنصر div را به سه ستون تقسیم می کند که فاصله بین هر ستون با دیگری 30 پیکسل است.
عرض، استایل و رنگ خط کشی که بین هر دو ستون قرار دارد را مشخص می کند.
بیاموزهای مرتبط
CSS3 Multiple Column (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 6605
