🎯 CSS border-spacing Property

The border-spacing CSS property defines the space (gap) between adjacent table cells in an HTML table.

It controls the horizontal and vertical distance between table cells and only works when border-collapse: separate; is applied.

Without border-spacing, table cells stick together. This property helps create cleaner and more readable table layouts.

• Improves table readability
• Creates spacing between cells
• Helps UI clarity
• Better visual structure

Sets the spacing between table cells using units like px, em, or rem.

table {
    border-spacing: 10px;
}
                

You can also define horizontal and vertical spacing separately.

table {
    border-spacing: 15px 5px;
}
                

• 15px → horizontal spacing
• 5px → vertical spacing

Resets the property to the default browser value.

The element inherits the border-spacing value from its parent.