الخاصية 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;

مصادر ومواصفات