الفرق بين المراجعتين ل"CSS/column-gap"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
(مراجعة متوسطة واحدة بواسطة نفس المستخدم غير معروضة) | |||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>column-gap</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>column-gap</code>}}</noinclude> | ||
− | الخاصية <code>column-gap</code> في CSS تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements). | + | الخاصية <code>column-gap</code> في CSS تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements). |
− | |||
− | |||
− | + | == بطاقة الخاصية == | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{| class="wikitable" style="width: 100%;" | {| 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>column-gap</code> قيمةً من القيم التالية. | ||
− | === | + | === <code>normal</code> === |
تُشير هذه الكلمة المحجوزة إلى المسافة الفاصلة بين الأعمدة الافتراضية في المتصفح، وتنصح المواصفة بأن تكون هذه المسافة مساويةً للقيمة <code>1em</code>، وتأخذ أغلبية المتصفحات بهذه القيمة. | تُشير هذه الكلمة المحجوزة إلى المسافة الفاصلة بين الأعمدة الافتراضية في المتصفح، وتنصح المواصفة بأن تكون هذه المسافة مساويةً للقيمة <code>1em</code>، وتأخذ أغلبية المتصفحات بهذه القيمة. | ||
− | === | + | === <code>[[CSS/length|<length>]]</code>=== |
قيمة طولية تُحدِّد المسافة الفاصلة بين الأعمدة، ولا يجوز أن تكون القيمةُ سالبةً. | قيمة طولية تُحدِّد المسافة الفاصلة بين الأعمدة، ولا يجوز أن تكون القيمةُ سالبةً. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
سطر 82: | سطر 84: | ||
</syntaxhighlight> | </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]. | * مواصفة [https://drafts.csswg.org/css-multicol-1/#column-gap CSS Multi-column Layout Module]. |
المراجعة الحالية بتاريخ 05:02، 12 سبتمبر 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;
انظر أيضًا
- صفحة الخاصية
column-count
التي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها. - صفحة الخاصية
column-fill
التي تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة. - صفحة الخاصية
column-rule
التي تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة، والخاصيات الفرعية لهذه الخاصية وهيcolumn-rule-color
وcolumn-rule-style
وcolumn-rule-width
. - صفحة الخاصية
column-span
التي سمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمةall
لها. - صفحة الخاصية
column-width
التي تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها.
مصادر ومواصفات
- مواصفة CSS Multi-column Layout Module.