الفرق بين المراجعتين ل"CSS/column-gap"

مراجعة 19:30، 29 أغسطس 2018

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

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

مواصفة CSS Multi-column Layout Module.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>column-gap</code>}}</noinclude>
-الخاصية <code>column-gap</code> في CSS تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements).<nowiki/><syntaxhighlight lang="css">
+الخاصية <code>column-gap</code> في CSS تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements).
-/* كلمة محجوزة */
-column-gap: normal;
-/* <length> قيمة طولية */
-column-gap: 3px;
-column-gap: 2.5em;
-/* القيم العامة */
+== بطاقة الخاصية ==
-column-gap: inherit;
-column-gap: initial;
-column-gap: unset;
-</syntaxhighlight>
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 30: / سطر 20: @@
 |كما حُدِّدَت.
-|}
+|}<syntaxhighlight lang="css">
+/* كلمة محجوزة */
+column-gap: normal;
+/* <length> قيمة طولية */
+column-gap: 3px;
+column-gap: 2.5em;
+/* القيم العامة */
+column-gap: inherit;
+column-gap: initial;
+column-gap: unset;
+</syntaxhighlight>
 == أمثلة ==
@@ سطر 73: / سطر 75: @@
 == البنية العامة ==
 تقبل الخاصية <code>column-gap</code> قيمةً من القيم التالية.
-=== القيمة <code>normal</code> ===
+===  <code>normal</code> ===
 تُشير هذه الكلمة المحجوزة إلى المسافة الفاصلة بين الأعمدة الافتراضية في المتصفح، وتنصح المواصفة بأن تكون هذه المسافة مساويةً للقيمة <code>1em</code>، وتأخذ أغلبية المتصفحات بهذه القيمة.
-=== القيمة <code>[[CSS/length|<length>]]</code>===
+=== <code>[[CSS/length|<length>]]</code>===
 قيمة طولية تُحدِّد المسافة الفاصلة بين الأعمدة، ولا يجوز أن تكون القيمةُ سالبةً.
 === البنية الرسمية ===