CSS / Reference / border-spacing: Separate Cell Gaps and Collapsed Borders
border-spacing sets gaps between neighboring cell borders in a table using separate borders. One length sets both axes; two lengths specify horizontal then vertical spacing.
Syntax and value choices
| Property | Initial value | Inherited | Main application conditions |
|---|---|---|---|
border-spacing |
0 | Yes | Tables in the separated-border model |
Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.
table { border-collapse: separate; border-spacing: 12px 6px; }
| Value or category | Behavior and choice |
|---|---|
0 |
Keep separate borders with no gap. |
12px |
Use a 12px gap on both axes. |
12px 6px |
Use 12px horizontally and 6px vertically. |
collapse |
Use the collapsed-border model rather than cell spacing. |
For supported values and conditions, see MDN border-spacing.
Run the example and compare results
Save this complete code as css-reference-10618-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>border-spacing comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
table { border-collapse: separate; border: 2px solid #333; }
td { padding: 10px; border: 2px solid #006c9c; }
.target { border-spacing: 12px 6px; }
.reference { border-spacing: 0; }
</style>
</head>
<body>
<main id="demo">
<h1>border-spacing comparison</h1>
<section class="samples"><div><p class="label">12px 6px</p><table class="target"><tbody><tr><td>Content</td><td></td></tr><tr><td>Second</td><td>Value</td></tr></tbody></table></div><div><p class="label">0</p><table class="reference"><tbody><tr><td>Content</td><td></td></tr><tr><td>Second</td><td>Value</td></tr></tbody></table></div></section>
</main>
</body>
</html>
The first table has 12px horizontal and 6px vertical gaps. The zero-spacing table still has separate borders; zero gaps do not merge them as collapse does.
Cell padding versus gaps
Cell padding separates content from its own border. Border spacing separates neighboring borders. The space between the table’s outer border and edge cells also involves table padding and spacing.
Initial values versus browser styles
The property’s initial value is zero, even though a browser stylesheet may assign table spacing such as 2px. Explicitly set the border model and gap when the exact result matters.
Change one setting at a time
Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.
- Keep zero spacing on .reference but switch to collapse. Border conflict treatment changes; zero gaps and collapsed borders are not the same. Restore separate.
- Reverse the first table’s gap to 6px 12px, observe the axis change, and restore 12px 6px without changing cell padding.
For table-wide sizing and cell layout, see CSS Tables: Borders, Sizing, and table-layout. Related properties to compare alongside these conditions are empty-cells.
When the result is missing or unexpected
- Check for a theme rule forcing border-collapse: collapse.
- Use supported nonnegative lengths rather than negative or percentage gaps.
CSS / Reference / text-indent: First-Line Indents and Hanging Paragraphs
Create first-line and hanging indents, distinguish them from paragraph padding, and check inheritance, writing direction, and narrow-screen clipping.
CSS / Reference / font-family: Font Lists, Glyph Fallback, and Loading
Build a font stack with appropriate generic fallbacks and inspect the fonts actually used. Distinguish naming a family from loading files and covering characters.
CSS / Reference / quotes: Choose Nested Quotation Marks
Choose generated quotation pairs for nested text and distinguish them from literal punctuation. Compare automatic marks, none, and quotation-depth operations.
CSS / Reference / font-weight: Numeric Weights, Relative Weights, and Font Matching
Request numeric or relative font weights and inspect the supplied faces. Compare static and variable-font behavior without assuming every number produces a unique weight.
CSS / Reference / empty-cells: Show or Hide Empty Table Cells
Control empty-cell borders and backgrounds in a separated table while preserving its structure. Compare show, hide, whitespace, and the collapsed-border exception.
CSS / Reference / content: Generate Pseudo-Element Text and Decoration
Generate strings, attribute labels, counters, and decorative pseudo-elements. Compare none with an empty string and retain important information in real HTML.
CSS / Reference / border-spacing: Separate Cell Gaps and Collapsed Borders
Set horizontal and vertical gaps in separate-border tables. Distinguish cell padding, zero spacing, collapsed borders, and browser default styles.
CSS / Reference / overflow: Visible Overflow, Scrolling, Hidden, and Clip
Choose clipping and scrolling behavior with appropriate size constraints. Compare hidden with clip and inspect axis interactions and flex minimum sizes.
CSS / Reference / background-position: Percentages, Centers, and Edge Offsets
Position backgrounds using centers, percentages, or edge offsets. Calculate percentages from the remaining space and account for oversized cover images and multiple layers.
CSS / Reference / letter-spacing, word-spacing: Compare Character and Word Spacing
Adjust character and word gaps independently using the same text and a normal baseline. Account for inheritance, language, wrapping, and excessive negative spacing.