CSS border-spacing Property

CSS border-spacing Property


CSS border-spacing Property
The border-spacing property determines the spacing between cells. 
This has no effect unless border-collapse is set to separate.
Syntax -
border-spacing: non-negative length(s) | inherit
 
Now we will see the values with their descriptions  -
Value
Description
<length> <length>
This syntax allows specifying separate horizontal and vertical values respectively. 
inherit
Inherits this property from its parent element.
 
Now we will see Examples -
Example - Border-spacing 13px -
<!DOCTYPE html>
<html lang="en">
<style>
  .one{
    border-collapse: separate;
  border-spacing: 13px

  }
li {
list-style-position: inside;
}
</style>

    <title>Document</title>
</head>
<body>
    <html>

  <head>
      <title>HTML Tables</title>
  </head>
 
  <body>
      <table border = "1" class="one">
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
       
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
        <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 4, Column 1</td>
            <td>Row 4, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 5, Column 1</td>
            <td>Row 5, Column 2</td>
        </tr>
   
        <tr>
            <td>Row 6, Column 1</td>
            <td>Row 6, Column 2</td>
        </tr>
   
   
        </table>
   
  </body>
</html>
     
</body>

</html>
Output -