الفرق بين المراجعتين لصفحة: «CSS/border-spacing»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>border-spacing</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>border-spacing</code>}}</noinclude> | ||
الخاصية <code>border-spacing</code> في CSS تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت قيمة الخاصية <code>[[CSS/border-collapse|border-collapse]]</code> هي <code>separate</code>. | الخاصية <code>border-spacing</code> في CSS تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت قيمة الخاصية <code>[[CSS/border-collapse|border-collapse]]</code> هي <code>separate</code>. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 30: | سطر 21: | ||
|} | |} | ||
<syntaxhighlight lang="css"> | |||
/* <length> */ | |||
border-spacing: 2px; | |||
/* horizontal <length> | vertical <length> */ | |||
border-spacing: 1cm 2em; | |||
/* القيم العامة */ | |||
border-spacing: inherit; | |||
border-spacing: initial; | |||
border-spacing: unset; | |||
</syntaxhighlight>ستستخدم قيمة الخاصية <code>border-spacing</code> على الحافة الخارجية للجدول، إذ تكون المسافة بين إطار الجدول وبين الخلايا في أول وآخر سطر أو عمود هي مجموع قيمة هذه الخاصية (على الأطراف الأفقية أو الرأسية) مع قيمة الحاشية <code>[[CSS/padding|padding]]</code> الموافقة لها (على الطرف العلوي أو الأيمن أو السفلي أو الأيسر). | |||
== أمثلة == | == أمثلة == | ||
| سطر 85: | سطر 89: | ||
* إذا حُدِّدت قيمتين، فأوّل قيمة تُعرِّف التباعد الأفقي بين الخلايا (أي المسافة بين الخلايا الموجودة في «الأعمدة» المتجاورة)، وثاني قيمة تُعرِّف التباعد الرأسي بين الخلايا (أي المسافة بين الخلايا الموجودة في الأسطر المتجاورة). | * إذا حُدِّدت قيمتين، فأوّل قيمة تُعرِّف التباعد الأفقي بين الخلايا (أي المسافة بين الخلايا الموجودة في «الأعمدة» المتجاورة)، وثاني قيمة تُعرِّف التباعد الرأسي بين الخلايا (أي المسافة بين الخلايا الموجودة في الأسطر المتجاورة). | ||
=== | === <code>[[CSS/length|<length>]]</code> === | ||
قيمة التباعد. | قيمة التباعد. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
مراجعة 08:23، 29 يوليو 2018
الخاصية border-spacing في CSS تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت قيمة الخاصية border-collapse هي separate.
بطاقة الخاصية
| القيمة الابتدائية | 0
|
|---|---|
| تُطبَّق على | عناصر table و inline-table.
|
| قابلة للوراثة | نعم |
| قابلة للحركة | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* <length> */
border-spacing: 2px;
/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;
/* القيم العامة */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;
ستستخدم قيمة الخاصية border-spacing على الحافة الخارجية للجدول، إذ تكون المسافة بين إطار الجدول وبين الخلايا في أول وآخر سطر أو عمود هي مجموع قيمة هذه الخاصية (على الأطراف الأفقية أو الرأسية) مع قيمة الحاشية padding الموافقة لها (على الطرف العلوي أو الأيمن أو السفلي أو الأيسر).
أمثلة
سنستخدم في المثال الآتي جدولًا <table> وسنضبط له ولجميع خلاياه إطارات border، وسنستخدم الخاصية border-spacing مع قيمتين (أوّل قيمة تمثل التباعد الأفقي والثانية التباعد الرأسي)، وسنضبط الحواشي باستخدام الخاصية المختصرة padding (سيكون مقدار الحواشي العليا واليسرى مساويًا للصفر، بينما الحواشي السفلى واليمنى يساوي 8px)، لاحظ كيف تُجمَع قيمة الحواشي مع القيمة الموافقة لها من خاصية border-spacing:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
شيفرة CSS:
table {
border-spacing: 5px 12px;
padding: 0 8px 8px 0;
border: 1px solid salmon;
}
td {
width: 20px;
height: 20px;
border: 1px solid #069;
text-align: center;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 8 | 4 | 1 |
البنية العامة
الخاصية border-spacing تقبل قيمةً واحدةً أو قيمتين:
- إذا حُدِّدَت قيمة واحدة فهي تُعرِّف التباعد بين الخلايا الأفقي والرأسي.
- إذا حُدِّدت قيمتين، فأوّل قيمة تُعرِّف التباعد الأفقي بين الخلايا (أي المسافة بين الخلايا الموجودة في «الأعمدة» المتجاورة)، وثاني قيمة تُعرِّف التباعد الرأسي بين الخلايا (أي المسافة بين الخلايا الموجودة في الأسطر المتجاورة).
<length>
قيمة التباعد.
البنية الرسمية
border-spacing: <length> <length>?;
مصادر ومواصفات
- مواصفة CSS Level 2 (Revision 1).