CSS Border Spacing

The CSS border-spacing property specifies the space between the borders of adjacent cells in a table. It only applies when the table's border-collapse property is set to "separate." This property helps in achieving a clean and structured look for tabular data.

Key Points on CSS Border Spacing:

• The border-spacing property is used to define the spacing between table cells.
• It accepts one or two values:
  • One value applies uniform spacing in both horizontal and vertical directions.
  • Two values specify horizontal and vertical spacing separately.
• The property is ignored if border-collapse: collapse; is applied.
• By default, the border spacing is 0, meaning no extra space between borders.
• Values can be specified in length units such as px, em, rem, etc.

Syntax for CSS Border Spacing:

/* Single value for uniform spacing */
        .table {
            border-spacing: 10px;
               }
        
        /* Two values for horizontal and vertical spacing */
        .table {
            border-spacing: 15px 20px; /* Horizontal: 15px, Vertical: 20px */
               }

Examples of CSS Border Spacing:

The following examples demonstrate the usage of the border-spacing property:

            .table {
            border-spacing: 10px;
            border: 1px solid black;
                   }

            .table {
            border-spacing: 20px 15px; /* Horizontal: 20px, Vertical: 15px */
            border: 1px solid black;
                   }

Common Use Cases:

• Creating space between cells in a table for a better visual effect.
• Customizing the layout of tabular data for clarity and readability.
• Applying different horizontal and vertical spacing for a unique table design.

When using border-spacing, ensure the table structure is consistent and does not interfere with the overall design of the webpage. For tables with collapsing borders, consider alternatives like padding.