راسخون

مرجع CSS

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت target-new

 

مثال

باز کردن پنجره های جدید در سربرگ جدید به جای پنجره جدید:

a
{
target-name:new;
target-new:tab;
}

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

    

هیچ یک از مرورگرهای اصلی، خصوصیت target-new را پشتیبانی نمی کنند.

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

با استفاده از خصوصیت target-new می توان مشخص کرد که لینک های جدید در پنجره جدید باز شوند و یا در سربرگ جدیدی در پنچره جاری باز شوند.

توجه: خصوصیت target-new تنها در صورتی کار می کند که خصوصیت target-name سربرگ یا پنجره جدیدی ایجاد کند.

مقدار پیشفرض window
ارث بری خیر
نسخه CSS3
JavaScriptساختار object.style.targetNew="tab"

نحوه استفاده

target-new: window|tab|none;
مقدار توضیحات
window

لینک در پنجره جدید باز می شود.
tab

لینک در سربرگ جدیدی در پنجره جاری باز می شود.
none

مقصد جدیدی ایجاد نمی شود.

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت target-position

مثال

باز کردن تمام لینک ها در پنجره جدید، و قرار دادن پنجره جدید روی تمام سربرگ ها و پنجره های قبلی

a
{
target-name:new;
target-position:front;
}

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

    

هیچ یک از مرورگرهای اصلی، خصوصیت target-position را پشتیبانی نمی کنند.

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

با استفاده از خصوصیت target-position می توان مشخص کرد که مقصد جدید لینک باید کجا باشد.

توجه: خصوصیت target-position فقط در صورتی کار می کند که خصوصیت target-name پنجره یا سربرگ جدید ایجاد کند.

مقدار پیشفرض above
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.targetPosition="front"

نحوه استفاده

target-position: above|behind|front|back;
مقدار توضیحات
above

پنجره یا سربرگ جدید روی پنجره یا سربرگ جاری قرار می گیرد.
behind

پنجره یا سربرگ جدید پشت پنجره یا سربرگ جاری قرار می گیرد.
front

پنجره یا سربرگ جدید روی تمام سربرگ ها یا پنجره ها قرار می گیرد.
back

پنجره یا سربرگ جدید پشت تمام سربرگ ها یا پنجره ها قرار می گیرد.

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت list-style

مثال

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

ul
{
list-style:square url("sqpurple.gif");
}

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

با استفاده از فرم مختصر شده list-style می توان تمام خصوصیات مربوط به لیست را در یک خط تخصیص داد.

خصوصیاتی که می توانند در این خط تنظیم شوند به ترتیب عبارتند از: list-style-type, list-style-position, list-style-image

اگر یکی از خصوصیت ها در بالا مقدار دهی نشود، مثلا" تخصیص به صورت "list-style:circle inside" باشد، مقدار پیش فرض برای آن خصوصیت درج خواهد شد.

مقدار پیشفرض disc outside none
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.listStyle="decimal inside"

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

    

تمام مرورگرهای اصلی، خصوصیت list-styleرا پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات
list-style-type  نوع علامت لیست را مشخص می کند. برای مشاهده مقادیر ممکن به list-style-type مراجعه فرمایید.
list-style-position مشخص می کند که علامت لیست در کجا قرار گیرد. برای مشاهده مقادیر ممکن به  list-style-position مراجعه فرمایید.
list-style-image به جای علامت از تصویر استفاده می کند برای مشاهده مقادیر ممکن به list-style-image مراجعه فرمایید.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت list-style-image

مثال

مشخص کردن تصویر به جای علامت یک لیست:

ul
{
list-style-image:url('sqpurple.gif');
}

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

با استفاده از خصوصیت list-style-image می توان تصویری را جایگزین علامت لیست کرد.

توجه: همواره خصوصیت list-style-type را مقدار دهی کنید. این خصوصیت در صورتی که به هر دلیلی تصویر در دسترس نبود، استفاده می گردد.

مقدار پیشفرض none
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.listStyleImage="url('/images/blueball.gif')"

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

    

تمام مرورگرهای اصلی، خصوصیت list-style-image را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

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

تصویری نمایش داده نمی شود. به جای آن، خصوصیت list-style-type مشخص می کند که چه علامتی برای لیست استفاده گردد. این مقدار، پیش فرض است.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت list-style-position

مثال

مشخص کردن مکانی که علامت لیست بایستی نمایش داده شود. (در این مثال لیست داخل فضای محتوا قرار می گیرد که موجب تورفتگی بیشتر می شود.)

ul
{
list-style-position:inside;
}

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

با استفاده از خصوصیت list-style-position می توان مشخص کرد که آیا علامت داخل فضای محتوا قرار گیرد یا خارج از فضای محتوا.

خارج (Outside):

  • Coffee
  • Tea
  • Coca-cola

داخل (Inside):

  • Coffee
  • Tea
  • Coca-cola
مقدار پیشفرض outside
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.listStylePosition="inside"

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

    

تمام مرورگرهای اصلی، خصوصیت list-style-position را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
inside  متن و علامت لیست را به صورت تو رفته نمایش می دهد. bulletها داخل فضای محتوا نمایش داده می شوند.
outside

علامت را سمت چپ متن نگه می دارد. bulletها خارج از فضای محتوا قرار می گیرند. این مقدار، پیش فرض است.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت list-style-type

مثال

تنظیم استایل های مختلف برای لیست:

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}

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

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

با استفاده از خصوصیت list-style-type می توان نوع علامت عناصر یک لیست را مشخص کرد.

مقدار پیشفرض "disc" for <ul> and "decimal" for <ol>
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.listStyleType="square"

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

    

تمام مرورگرهای اصلی، خصوصیت list-style-type را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

 

مقدار توضیحات نمایش دادن
armenian

علامت به صورت اعداد ارمنی باستان نمایش داده می شود.
circle

علامت به صورت دایره نمایش داده می شود.
cjk-ideographic

علامت به صورت اعداد مجازی نمایش داده می شود.
decimal

علامت عدد می باشد. برای لیست های مرتب، مقدار پیش فرض است
decimal-leading-zero

علامت عددی است به همراه صفر در ابتدای آن. مانند 01, 02, 03
disc

علامت به صورت دایره است. این مقدار پیش فرض است برای لیست های نامرتب (ul)
georgian

علامت به صورت اعداد گرجستانی باستان می باشد.
hebrew

علامت به صورت اعداد عبری باستان نمایش داده می شود.
hiragana

علامت به صورت اعداد ژاپنی (هیراگانا) نمایش داده می شود.
hiragana-iroha

علامت به صورت اعداد ژاپنی (ایروها) نمایش داده می شود.
inherit

مقادیر خصوصیت list-style-type از عنصر والدش ارث بری می شود.

  
katakana علامت به صورت نشانه گذاری مربعی ژاپنی (کاتاکانا) نمایش داده می شود.
katakana-iroha

علامت به صورت عدد ژاپنی (کاتاکانا ایروها) نمایش داده می شود.
lower-alpha

علامت به صورت حروف کوچک انگلیسی مانند a , b , ... نمایش داده می شود.
lower-greek

علامت به صورت اعداد کوچک یونانی نمایش داده شود.
lower-latin علامت به صورت اعداد لاتین کوچک نمایش داده می شود. (مانند a, b, ..)
lower-roman

علامت به صورت اعداد کوچک رومی نمایش داده می شود. (i, ii, iii, ...)
none

هیچ علامتی نمایش داده نمی شود.
square

علامت به صورت مربع نمایش داده می شود.
upper-alpha

علامت به صورت حروف بزرگ نمایش داده می شود. (A, B, C,...)
upper-latin

علامت به صورت حروف بزرگ لاتین نمایش داده می شود. (A, B, C...)
upper-roman

علامت به صورت حروف یونانی بزرگ نمایش داده می شود. (I, II, III, IV و ...)

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت margin

مثال

تنظیم کردن هر چهار margin یک عنصر p:

p 
{
margin:2cm 4cm 3cm 4cm;
}

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

فرم مختصر شده margin برای تنظیم تمام خصوصیت های margin در یک اعلان می باشد. این خصوصیت می تواند از یک تا چهار مقدار داشته باشد.

مثال:

  • margin:10px 5px 15px 20px;
    • top margin is 10px
    • right margin is 5px
    • bottom margin is 15px
    • left margin is 20px
  • margin:10px 5px 15px;
    • top margin is 10px
    • right and left margins are 5px
    • bottom margin is 15px
  • margin:10px 5px;
    • top and bottom margins are 10px
    • right and left margins are 5px
  • margin:10px;
    • all four margins are 10px

توجه: مقادیر منفی نیز قابل قبول است.

مقدار پیشفرض 0
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.margin="10px 5px"

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

    

تمام مرورگرهای اصلی، خصوصیت margin را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
auto  مرورگر margin عنصر را محاسبه می کند.
length میزان margin را در واحدهای پیکسل، سانتی متر و ... تعیین می کند. مقدار پیش فرض 0px است.
%

margin عنصر را به صورت درصدی از عرض عنصر والدش محاسبه می کند.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.  

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت margin-bottom

مثال

تنظیم میزان margin عنصر p از لبه پایین:

p 
{
margin-bottom:2cm;
}

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

با استفاده از خصوصیت margin می توان میزان margin از لبه پایین را مشخص کرد.

توجه: مقادیر منفی قابل قبول است.

مقدار پیشفرض 0
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.marginBottom="10px"

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

    

تمام مرورگرهای اصلی، خصوصیت margin-bottom را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
auto مرورگر margin عنصر از لبه پایین را محاسبه می کند.
length

میزان margin عنصر از لبه پایین را در واحدهای پیکسل، سانتی متر و ... تعیین می کند. مقدار پیش فرض 0px است.
%

margin عنصر از لبه پایین را به صورت درصدی از عرض عنصر والدش محاسبه می کند.
inherit تعيين مي کند که margin عنصر از لبه پایین بايد از والدش، ارث بري داشته باشد.  

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت margin-left

مثال

تنظیم میزان margin عنصر p از لبه سمت چپ:

p 
{
margin-left:2cm;
}

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

با استفاده از خصوصیت margin-left می توان میزان margin از لبه سمت چپ را مشخص کرد.

توجه: مقادیر منفی قابل قبول است

مقدار پیشفرض 0
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.marginLeft="10px"

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

    

تمام مرورگرهای اصلی، خصوصیت margin-left را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
auto  مرورگر margin عنصر از لبه سمت چپ را محاسبه می کند.
length

میزان margin عنصر از لبه سمت چپ را در واحدهای پیکسل، سانتی متر و ... تعیین می کند. مقدار پیش فرض 0px است.
%

margin عنصر از لبه سمت چپ را به صورت درصدی از عرض عنصر والدش محاسبه می کند.
inherit تعيين مي کند که margin عنصر از لبه سمت چپ بايد از والدش، ارث بري داشته باشد.  

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت margin-right

مثال

تنظیم میزان margin عنصر p از لبه سمت راست:

p 
{
margin-right:2cm;
}

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

با استفاده از خصوصیت margin-right می توان میزان margin از لبه سمت راست را مشخص کرد.

توجه: مقادیر منفی قابل قبول است

مقدار پیشفرض 0
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.marginRight="10px"

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

    

تمام مرورگرهای اصلی، خصوصیت margin-right را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
auto

مرورگر margin عنصر از لبه سمت راست را محاسبه می کند.
length

میزان margin عنصر از لبه سمت راست را در واحدهای پیکسل، سانتی متر و ... تعیین می کند. مقدار پیش فرض 0px است.
%

margin عنصر از لبه سمت راست را به صورت درصدی از عرض عنصر والدش محاسبه می کند.
inherit

تعيين مي کند که margin عنصر از لبه سمت راست بايد از والدش، ارث بري داشته باشد.

  

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت margin-top

مثال

تنظیم میزان margin عنصر p از لبه بالا:

p 
{
margin-top:2cm;
}

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

با استفاده از خصوصیت margin-top می توان میزان margin از لبه پایین را مشخص کرد.

توجه: مقادیر منفی قابل قبول است

مقدار پیشفرض 0
ارث بری خیر
نسخه CSS1
JavaScript ساختار object.style.marginTop="10px"

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

    

تمام مرورگرهای اصلی، خصوصیت margin-top را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
auto

مرورگر margin عنصر از لبه بالا را محاسبه می کند.
length

میزان margin عنصر از لبه بالا را در واحدهای پیکسل، سانتی متر و ... تعیین می کند. مقدار پیش فرض 0px است.
%

margin عنصر از لبه بالا را به صورت درصدی از عرض عنصر والدش محاسبه می کند.
inherit تعيين مي کند که margin عنصر از لبه بالا بايد از والدش، ارث بري داشته باشد.  

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت column-count

مثال

تقسیم کردن متن مربوط به عنصر Div در سه ستون:

div
{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
}

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

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

    

تمام مرورگرهای اصلی، خصوصیت background را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

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

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

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

توجه: خاصیت column-count توسط Internet Explorer 9 و نسخه های قبل از آن پشتیبانی نمی شود.

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

با استفاده از خاصیت column-count تعداد ستون هایی که یک عنصر باید به آن تعداد تقسیم شود را مشخص می کنیم.

مقدار پیشفرض auto
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.columnCount=3

نحوه استفاده

column-count: number|auto;
مقدار توضیحات نمایش دادن
number تعداد ستون های بهینه که محتوای عنصر در آن پخش می شود.
auto

"تعداد ستون هایی که توسط سایر خاصیت ها مانند "column-width" مشخص می شود.
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت column-fill

مثال

مشخص کردن نحو پر کردن ستون ها:

div
{
column-fill:auto;
}

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

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

    

هیچ یک از مرورگرهای اصلی، خصوصیت background را پشتیبانی می کنند.

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

با استفاده از خصوصیت column-fill مشخص می کنیم که نحوه پر شدن ستون ها به صورت متوازن (balanced) باشد یا خیر.

مقدار پیشفرض balance
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.columnFill="auto"

نحوه استفاده

column-fill: balance|auto;
مقدار توضیحات
balance  ستون ها متوازن هستند. مروگر بایستی اختلاف طول ستوه ها را کم کند.
auto ستون ها به صورت متوالی پر می شوند و هر کدام طول متفاوتی نسبت به دیگری دارد.

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

Column-count

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

Column-gap

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

Column-rule

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

 
parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت 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 را پیشنهاد می دهد.
 

 

parisaexp کاربر نقره ای
|
تعداد پست ها : 888
|
تاریخ عضویت : مهر 1392 

خصوصیت 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

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