CoreUI React Demo按钮间距异常：Options卡片按钮为何有间距？

我之前碰到过完全一模一样的情况！别被「CSS完全一致」的表象迷惑，内联元素的空白字符几乎肯定是罪魁祸首——这种隐形的换行、空格经常会在你毫无察觉的时候制造出莫名的间距。

问题根源排查 #

你可以打开浏览器开发者工具，切换到「Elements」面板：

• 查看Options卡片内的按钮节点之间，是不是存在一个#text类型的节点（就是渲染后的空格/换行）
• 对比其他正常卡片的按钮，它们的节点之间应该没有这个空白节点

这是因为React会把JSX中标签之间的换行、空格原样渲染成HTML里的空白字符，而浏览器会把这些空白字符解析为一个空格，对inline-block或inline类型的按钮（CoreUI的按钮默认是inline-block）来说，就会产生可见的间距。如果其他卡片的按钮是连在一起写的（没有换行/空格），就不会出现这个问题。

举个直观的例子：

// 这种写法会产生空白字符，导致按钮间距
<CButton>Option 1</CButton>
<CButton>Option 2</CButton>

// 这种写法不会产生空白，按钮紧贴
<CButton>Option 1</CButton><CButton>Option 2</CButton>

快速解决办法 #

你可以任选一种方案：

• 方案一（最直接）：修改JSX，把Options卡片里的按钮标签连在一起写，去掉它们之间的换行和空格
• 方案二（通用兼容）：给Options卡片的按钮容器添加自定义CSS：

  .btn-group-custom {
    font-size: 0; /* 消除空白字符的占位影响 */
  }
  .btn-group-custom .btn {
    font-size: 1rem; /* 恢复按钮本身的字体大小 */
  }
  

• 方案三（现代布局）：给容器设置Flex布局，强制消除间距：

  .btn-group-custom {
    display: flex;
    gap: 0; /* 可根据需求调整为你想要的间距，设为0则消除默认空白 */
  }
  

为什么移动DOM位置没用？ #

因为问题的根源不在卡片的DOM位置，而在按钮节点之间的空白字符——不管你把卡片移到哪里，只要按钮的渲染结构里有这些空白，间距就会一直存在。

内容的提问来源于stack exchange，提问作者Tim