CSS - border-spacing 属性

CSS 的 border-spacing 属性设置表格中单元格之间的距离。为了使此属性生效，表格必须使用 border-collapse 的 'separate' 模型进行渲染。

语法

border-spacing: length | initial | inherit;

属性值

值	描述
长度	它指定单元格之间的距离。任何长度单位。一个值应用于水平和垂直方向的间距，如果给出两个值，则第一个值应用于水平轴的间距，第二个值应用于垂直轴的间距。
初始值	这将属性设置为其默认值。
继承	这从父元素继承属性。

CSS 边框间距属性示例

以下示例说明了使用不同值的 border-spacing 属性。

带长度值的边框间距属性

要设置表格单元格间距，我们可以使用长度值（例如，10px、30px 14px 等）。单个值同时应用于水平和垂直方向的间距，而两个值分别指定水平和垂直方向的间距。这些在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
         padding: 5px;
         text-align: center;
         background-color: lightblue;
      }
      #single-value {
         border-collapse: separate;
         border-spacing: 17px;
      }

      #two-values {
         border-collapse: separate;
         border-spacing: 17px 45px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-spacing property
   </h2>
   <h4>
      border-spacing: Single Value (17px)
   </h4>
   <p>
      Here, single value 17px has been used,
      it applies spacing in both horizontal
      and vertical directions. The 'border-collapse'
      property is set to separate.
   </p>
   <table id="single-value">
      <tr>
         <th>Name</th>
         <th>Subject</th>
         <th>Marks</th>
      </tr>
      <tr>
         <td>John</td>
         <td>English</td>
         <td>76</td>
      </tr>
      <tr>
         <td>Aman</td>
         <td>Maths</td>
         <td>85</td>
      </tr>
      <tr>
         <td>Priya</td>
         <td>Chemistry</td>
         <td>90</td>
      </tr>
   </table>

   <h4>
      border-spacing: Two values (17px 45px)
   </h4>
   <p>
      Here, two values have been used
      17px and 45px. The 17px spacing is applied
      horizontally and 45px spacing is applied 
      vertically. The 'border-collapse' property
      is set to separate.
   </p>
   <table id="two-values">
      <tr>
         <th>Name</th>
         <th>Subject</th>
         <th>Marks</th>
      </tr>
      <tr>
         <td>John</td>
         <td>English</td>
         <td>76</td>
      </tr>
      <tr>
         <td>Aman</td>
         <td>Maths</td>
         <td>85</td>
      </tr>
      <tr>
         <td>Priya</td>
         <td>Chemistry</td>
         <td>90</td>
      </tr>
   </table>

</body>

</html>

带初始值的边框间距属性

为了不在表格单元格之间有任何间距，我们可以使用初始值。初始值删除了 2px 的默认间距。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
         text-align: center;
         background-color: lightgreen;
      }

      #default {
         border-collapse: separate;
      }

      #initial {
         border-collapse: separate;
         border-spacing: initial;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-spacing property
   </h2>
   <h4>
      Default spacing of 2px
   </h4>
   <p>
      Here, the 'border-spacing' property
      has not been given any value but still
      some space is provided between the cells.
      This is the default 2px space.
   </p>
   <table id="default">
      <tr>
         <th>Name</th>
         <th>Subject</th>
         <th>Marks</th>
      </tr>
      <tr>
         <td>John</td>
         <td>English</td>
         <td>76</td>
      </tr>
      <tr>
         <td>Aman</td>
         <td>Maths</td>
         <td>85</td>
      </tr>
      <tr>
         <td>Priya</td>
         <td>Chemistry</td>
         <td>90</td>
      </tr>
   </table>

   <h4>
      border-spacing: Initial
   </h4>
   <p>
      Here, initial value has been used,
      it sets 0 spacing between the table cells
      as shown here.
   </p>
   <table id="initial">
      <tr>
         <th>Name</th>
         <th>Subject</th>
         <th>Marks</th>
      </tr>
      <tr>
         <td>John</td>
         <td>English</td>
         <td>76</td>
      </tr>
      <tr>
         <td>Aman</td>
         <td>Maths</td>
         <td>85</td>
      </tr>
      <tr>
         <td>Priya</td>
         <td>Chemistry</td>
         <td>90</td>
      </tr>
   </table>

</body>

</html>

支持的浏览器

属性
border-spacing	1.0	8.0	1.0	1.0	4.0

css_properties_reference.htm

打印页面