الفرق بين المراجعتين لصفحة: «CSS/column-gap»
< CSS
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 84: | سطر 84: | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-multicol-1/#column-gap CSS Multi-column Layout Module]. | * مواصفة [https://drafts.csswg.org/css-multicol-1/#column-gap CSS Multi-column Layout Module]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Columns]] | [[تصنيف:CSS Columns|{{SUBPAGENAME}}]] | ||
مراجعة 15:34، 28 يناير 2018
الخاصية 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.