الخاصية column-gap

من موسوعة حسوب
< CSS
مراجعة 09:17، 30 أكتوبر 2017 بواسطة عبد اللطيف ايمش (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

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

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