الفرق بين المراجعتين لصفحة: «CSS/border-spacing»

المراجعة الحالية بتاريخ 08:11، 12 أغسطس 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>?;

انظر أيضًا

صفحة الخاصية border والخاصيات التي تضبطها هذه الخاصية وهي: border-width، و border-style، و border-color.
صفحة الخاصيات التي تضبط أجزاءً من الإطار: الإطار العلوي border-top، والإطاري السفلي border-bottom، والإطار اليميني border-right، والإطار اليساريborder-left.
صفحة الخاصية border-collapse التي تُحدِّد إذا كان إطار الجدول منفصلًا عن إطار الخلايا أو كان مدمجًا مع إطار الخلايا.

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

مواصفة ‎CSS Level 2 (Revision 1)‎.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>border-spacing</code>}}</noinclude>
-الخاصية <code>border-spacing</code> في CSS تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت قيمة الخاصية <code>[[CSS/border-collapse|border-collapse]]</code> هي <code>separate</code>.<syntaxhighlight lang="css">
+الخاصية <code>border-spacing</code> في CSS تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت قيمة الخاصية <code>[[CSS/border-collapse|border-collapse]]</code> هي <code>separate</code>.
-/* <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> الموافقة لها (على الطرف العلوي أو الأيمن أو السفلي أو الأيسر).
 {| 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> ===
+===  <code>[[CSS/length|<length>]]</code> ===
 قيمة التباعد.
 === البنية الرسمية ===
@@ سطر 92: / سطر 96: @@
 </syntaxhighlight>
-== مصادر ومواصفات ==
+==  انظر أيضًا ==
+*صفحة الخاصية <code>[[CSS/border|border]]</code> والخاصيات التي تضبطها هذه الخاصية وهي: <code>[[CSS/border-width|border-width]]</code>، و <code>[[CSS/border-style|border-style]]</code>، و <code>[[CSS/border-color|border-color]]</code>.
+*صفحة الخاصيات التي تضبط أجزاءً من الإطار: الإطار العلوي <code>[[CSS/border-top|border-top]]</code>، والإطاري السفلي <code>[[CSS/border-bottom|border-bottom]]</code>، والإطار اليميني <code>[[CSS/border-right|border-right]]</code>، والإطار اليساري<code>[[CSS/border-left|border-left]]</code>.
+*صفحة الخاصية <code>[[CSS/border-collapse|border-collapse]]</code> التي تُحدِّد إذا كان إطار الجدول منفصلًا عن إطار الخلايا أو كان مدمجًا مع إطار الخلايا.
+==مصادر ومواصفات==
 * مواصفة ‎[http://www.w3.org/TR/CSS2/tables.html#separated-borders CSS Level 2 (Revision 1)‎].
 [[تصنيف:CSS|{{SUBPAGENAME}}]]