الخاصية column-gap
< CSS
الخاصية column-gap
في CSS تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements).
/* كلمة محجوزة */
column-gap: normal;
/* <length> قيمة طولية */
column-gap: 3px;
column-gap: 2.5em;
/* القيم العامة */
column-gap: inherit;
column-gap: initial;
column-gap: unset;
القيمة الابتدائية | normal
|
---|---|
تُطبَّق على | العناصر متعددة الأعمدة. |
قابلة للوراثة | لا |
قابلة للتحريك | نعم |
القيمة المحسوبة | كما حُدِّدَت. |
أمثلة
مثال عن استخدام الخاصية 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;
مصادر ومواصفات
- مواصفة CSS Multi-column Layout Module.