عرض مصدر CSS/column-gap

<noinclude>{{DISPLAYTITLE:الخاصية <code>column-gap</code>}}</noinclude>
الخاصية <code>column-gap</code> في CSS تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements).

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>normal</code>
|-
! scope="row" |تُطبَّق على
|العناصر متعددة الأعمدة.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}<syntaxhighlight lang="css">
/* كلمة محجوزة */
column-gap: normal; 

/* <length> قيمة طولية */
column-gap: 3px;
column-gap: 2.5em;

/* القيم العامة */
column-gap: inherit;
column-gap: initial;
column-gap: unset;
</syntaxhighlight>

== أمثلة ==
مثال عن استخدام الخاصية <code>column-gap</code> مع قيمة طولية:<syntaxhighlight lang="html">
<p class="content-box">
هذه فقرةٌ نصيةٌ ستُقسَم إلى ثلاثة أعمدة باستخدام CSS،
لاحظ المسافات بين الأعمدة المتجاورة.
</p>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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;
}
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|4.0 (مع السابقة <code>-webkit-</code>)
50 (دون سابقة)
|2.0 (مع السابقة <code>-moz-</code>)
|10
|15 (مع السابقة <code>-webkit-</code>)
37 (دون سابقة)
|3.1 (مع السابقة <code>-webkit-</code>)
10 (دون سابقة)
|}

== البنية العامة ==
تقبل الخاصية <code>column-gap</code> قيمةً من القيم التالية.
===  <code>normal</code> ===
تُشير هذه الكلمة المحجوزة إلى المسافة الفاصلة بين الأعمدة الافتراضية في المتصفح، وتنصح المواصفة بأن تكون هذه المسافة مساويةً للقيمة <code>1em</code>، وتأخذ أغلبية المتصفحات بهذه القيمة.
=== <code>[[CSS/length|<length>]]</code>===
قيمة طولية تُحدِّد المسافة الفاصلة بين الأعمدة، ولا يجوز أن تكون القيمةُ سالبةً.
=== البنية الرسمية ===
<syntaxhighlight lang="css">
column-gap: <length> | normal;

</syntaxhighlight>
==  انظر أيضًا ==
* صفحة الخاصية  <code>[[CSS/column-count|column-count]]</code> التي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.
* صفحة الخاصية  <code>[[CSS/column-fill|column-fill]]</code> التي تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة.
* صفحة الخاصية  <code>[[CSS/column-rule|column-rule]]</code> التي تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة، والخاصيات الفرعية لهذه الخاصية وهي <code>[[CSS/column-rule-color|column-rule-color]]</code> و <code>[[CSS/column-rule-style|column-rule-style]]</code> و <code>[[CSS/column-rule-width|column-rule-width]]</code>.
* صفحة الخاصية  <code>[[CSS/column-span|column-span]]</code>التي سمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة <code>all</code> لها.
* صفحة الخاصية  <code>[[CSS/column-width|column-width]]</code> التي تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها.

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-multicol-1/#column-gap CSS Multi-column Layout Module]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Columns|{{SUBPAGENAME}}]]