CSS border-spacing property

by Online Tutorials Library July 14, 2022

CSS border-spacing property

This CSS property is used to set the distance between the borders of the adjacent cells in the table. It applies only when the border-collapse property is set to separate. There will not be any space between the borders if the border-collapse is set to collapse.

It can be defined as one or two values for determining the vertical and horizontal spacing.

When only one value is specified, then it sets both horizontal and vertical spacing.
When we use the two-value syntax, then the first one is used to set the horizontal spacing (i.e., the space between the adjacent columns), and the second value sets the vertical spacing (i.e., the space between the adjacent rows).

Syntax

Property Values

The values of this CSS property are defined as follows.

length: This value sets the distance between the borders of the adjacent table cells in px, cm, pt, etc. Negative values are not allowed.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Let’s understand this CSS property by using some examples. In the first example, we are using the single value of the border-spacing property, and in the second example, we are using two values of the border-spacing property.

Example

Here, we are using the single value of the border-spacing property. The border-collapse property is set to separate, and the value of the border-spacing is set to 45px.

  <!DOCTYPE html>  <html>    <head>  <title> border-spacing property </title>  <style>  table{  border: 2px solid blue;  text-align: center;  font-size: 20px;  background-color: lightgreen;  }  th{  border: 5px solid red;  background-color: yellow;  }  td{  border: 5px solid violet;  background-color: cyan;  }  #space{  border-collapse: separate;  border-spacing: 45px;  }  </style>  </head>    <body>    <h1> The border-spacing Property </h1>  <h2> border-spacing: 45px; </h2>  <table id = “space”>  <tr>  <th> First_Name </th>  <th> Last_Name </th>  <th> Subject </th>  <th> Marks </th>  </tr>  <tr>  <td> James </td>  <td> Gosling </td>  <td> Maths </td>  <td> 92 </td>  </tr>  <tr>  <td> Alan </td>  <td> Rickman </td>  <td> Maths </td>  <td> 89 </td>  </tr>  <tr>  <td> Sam </td>  <td> Mendes </td>  <td> Maths </td>  <td> 82 </td>  </tr>  </table>  </body>    </html>  

Test it Now

Output

CSS border-spacing property

Example

Here, we are using two values of the border-spacing property. The border-collapse property is set to separate, and the value of the border-spacing is set to 20pt 1em. The first value, i.e., 20pt sets the horizontal spacing, and the value 1em set the vertical spacing.

  <!DOCTYPE html>  <html>    <head>  <title> border-spacing property </title>  <style>  table{  border: 2px solid blue;  text-align: center;  font-size: 20px;  background-color: lightgreen;  }  th{  border: 5px solid red;  background-color: yellow;  }  td{  border: 5px solid violet;  background-color: cyan;  }  #space{  border-collapse: separate;  border-spacing: 20pt 1em;  }  </style>  </head>    <body>    <h1> The border-spacing Property </h1>  <h2> border-spacing: 20pt 1em; </h2>  <table id = “space”>  <tr>  <th> First_Name </th>  <th> Last_Name </th>  <th> Subject </th>  <th> Marks </th>  </tr>  <tr>  <td> James </td>  <td> Gosling </td>  <td> Maths </td>  <td> 92 </td>  </tr>  <tr>  <td> Alan </td>  <td> Rickman </td>  <td> Maths </td>  <td> 89 </td>  </tr>  <tr>  <td> Sam </td>  <td> Mendes </td>  <td> Maths </td>  <td> 82 </td>  </tr>  </table>  </body>    </html>  

Test it Now

Output

CSS border-spacing property

Next TopicCSS Display

CSS border-spacing property

CSS border-spacing property

Syntax

Property Values

Example

Example

Program to convert infix to postfix expression in C++ using the Stack Data Structure

CSS clip-path

You may also like