📏 CSS Tutorial: border-spacing

📌 Introduction

The border-spacing property in CSS controls the spacing between the cells of a table when using the separate border model (which is the default). It defines the horizontal and vertical distance between table cells — similar to "gap" but for table layouts. This property is ignored when border-collapse: collapse is used. Perfect for creating clean HTML tables with custom spacing. 📊✨

🎯 What Does border-spacing Do?

  • Controls the empty space between table cells
  • Works only when border-collapse: separate;
  • Accepts one or two length values
  • Useful for designing modern, spaced-out tables

✨ Syntax

Syntax

table {
  border-spacing: <length> <length>;
}

Note

If you specify **one value**, it applies to **both** horizontal and vertical spacing. If you specify **two values**, the first is horizontal spacing, and the second is vertical spacing.

🧩 Accepted Values

1. Single Value

Applies evenly between rows and columns.

Code Snippet

border-spacing: 10px;

2. Two Values

First value = horizontal spacing Second value = vertical spacing

Code Snippet

border-spacing: 20px 5px;

3. Using Different Units

Code Snippet

border-spacing: 1rem 0.5rem;

🔥 Practical Examples

1. Basic Table Spacing

Basic Example

table {
  border-spacing: 15px;
  border-collapse: separate;
}

2. Horizontal & Vertical Spacing

Code Snippet

table {
  border-spacing: 20px 8px;
  border-collapse: separate;
}

3. Removing Cell Spacing

Code Snippet

border-spacing: 0;

4. Styled Table with Spacing

Styled Table

table {
  border-collapse: separate;
  border-spacing: 12px 6px;
}

td {
  background: #f4f4f4;
  padding: 10px;
  border-radius: 6px;
}

5. border-spacing Ignored with border-collapse

Ignored Example

table {
  border-collapse: collapse; /* ❗ border-spacing will not work */
  border-spacing: 20px;       /* ignored */
}

📊 border-spacing vs border-collapse

PropertyEffect
border-spacingControls space between cells (only with "separate")
border-collapse: separateCells stay separated; spacing works
border-collapse: collapseCells merge borders; spacing is ignored

🧠 Tips & Best Practices

  • Use border-spacing for modern, clean table designs
  • Remember it only works in separate border mode
  • Combine with border-radius on table cells for card-like tables
  • Use subtle values (4px–12px) for professional spacing

🖼️ Visual Demo

Further details can be found at: https://dummyimage.com/900x240/eeeeee/000000&text=border-spacing+demo

>>“Well-spaced tables are easier to read — border-spacing helps bring clarity and modern style.” ✨

🎉 Conclusion

The border-spacing property gives you fine control over the spacing between table cells when using the separate border model. It supports one or two spacing values and is ideal for creating clean, modern, and readable table layouts. Remember: It works only with border-collapse: separate. Mastering it helps you design professional and visually appealing tables in CSS. 🚀