الخاصية column-gap
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الخاصية column-gap
في CSS تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements).
بطاقة الخاصية
القيمة الابتدائية | normal
|
---|---|
تُطبَّق على | العناصر متعددة الأعمدة. |
قابلة للوراثة | لا |
قابلة للتحريك | نعم |
القيمة المحسوبة | كما حُدِّدَت. |
/* كلمة محجوزة */
column-gap: normal;
/* <length> قيمة طولية */
column-gap: 3px;
column-gap: 2.5em;
/* القيم العامة */
column-gap: inherit;
column-gap: initial;
column-gap: unset;
أمثلة
مثال عن استخدام الخاصية column-gap
مع قيمة طولية:
<p class="content-box">
هذه فقرةٌ نصيةٌ ستُقسَم إلى ثلاثة أعمدة باستخدام CSS،
لاحظ المسافات بين الأعمدة المتجاورة.
</p>
شيفرة CSS:
.content-box {
margin: 1em;
padding: 1em;
width: 400px;
border: 1px solid #eaecf0;
background-color: #f8f9fa;
column-count: 3;
column-rule: solid;
column-gap: 40px;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 4.0 (مع السابقة -webkit- )
50 (دون سابقة) |
2.0 (مع السابقة -moz- )
|
10 | 15 (مع السابقة -webkit- )
37 (دون سابقة) |
3.1 (مع السابقة -webkit- )
10 (دون سابقة) |
البنية العامة
تقبل الخاصية column-gap
قيمةً من القيم التالية.
normal
تُشير هذه الكلمة المحجوزة إلى المسافة الفاصلة بين الأعمدة الافتراضية في المتصفح، وتنصح المواصفة بأن تكون هذه المسافة مساويةً للقيمة 1em
، وتأخذ أغلبية المتصفحات بهذه القيمة.
<length>
قيمة طولية تُحدِّد المسافة الفاصلة بين الأعمدة، ولا يجوز أن تكون القيمةُ سالبةً.
البنية الرسمية
column-gap: <length> | normal;
انظر أيضًا
- صفحة الخاصية
column-count
التي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها. - صفحة الخاصية
column-fill
التي تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة. - صفحة الخاصية
column-rule
التي تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة، والخاصيات الفرعية لهذه الخاصية وهيcolumn-rule-color
وcolumn-rule-style
وcolumn-rule-width
. - صفحة الخاصية
column-span
التي سمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمةall
لها. - صفحة الخاصية
column-width
التي تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها.
مصادر ومواصفات
- مواصفة CSS Multi-column Layout Module.