الخاصية border-spacing

الخاصية border-spacing في CSS تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت قيمة الخاصية border-collapse هي separate.

/* <length> */
border-spacing: 2px;

/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;

/* القيم العامة */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;

ستستخدم قيمة الخاصية border-spacing على الحافة الخارجية للجدول، إذ تكون المسافة بين إطار الجدول وبين الخلايا في أول وآخر سطر أو عمود هي مجموع قيمة هذه الخاصية (على الأطراف الأفقية أو الرأسية) مع قيمة الحاشية padding الموافقة لها (على الطرف العلوي أو الأيمن أو السفلي أو الأيسر).

القيمة الابتدائية	0
تُطبَّق على	عناصر table و inline-table.
قابلة للوراثة	نعم
قابلة للحركة	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

سنستخدم في المثال الآتي جدولًا <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)‎.