按钮间换行产生间距：为何与无空格内联显示效果不同？

问题本质：内联/行内块元素的空白字符渲染规则 #

你遇到的问题核心在于浏览器对行内级元素（inline/inline-block）之间空白字符的处理：

• 按钮默认的display属性是inline-block，当HTML代码里的按钮之间存在空格、换行、制表符这类空白字符时，浏览器会把它们合并渲染成一个标准空格，这就是按钮间距出现的根源。
• 如果你把按钮写在同一行且无任何空白（比如<button>按钮1</button><button>按钮2</button>），代码里没有空白字符，浏览器就不会渲染出间距，完全符合你的预期。
• 换行写按钮时，换行本身属于空白字符的一种，浏览器同样会将其解析成空格，所以和手动加空格的表现完全一致，都会出现按钮间距。

为什么浏览器要这么做？ #

这是浏览器默认的排版逻辑，目的是让普通文本内容的排版更符合阅读习惯——比如段落里的单词之间需要空格分隔。但这种规则在我们需要紧密排列的组件（比如按钮组）时，就会变成意料之外的“坑”。

直观测试对比 #

你可以用这段代码验证差异：

<!-- 会出现间距：换行产生空白字符 -->
<button>按钮1</button>
<button>按钮2</button>

<!-- 无间距：无空白字符 -->
<button>按钮1</button><button>按钮2</button>

配套的CSS示例：

button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  background: #ddd;
  cursor: pointer;
  transition: transform 0.2s ease;
}
button:hover {
  transform: translateY(4px);
}

运行后就能看到两种写法的明显差异，完全匹配你测试的结果。

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