Html 为什么向一行中的按钮添加左浮动会导致它们之间的间距发生变化？

我有三个这样的按钮：

<div class="float-left">
   <button class="small">X</button>
   <button class="small">Y</button>
   <button class="small">Z</button>
</div>

当我应用浮动：左到这些，我注意到间距 在按钮之间的变化。有人能告诉我为什么吗

---

这是？它与边距或类似的东西有区别吗？

浮动按钮会将它们变成块级元素。因此，标记中按钮之间的空格无效。如果不浮动它们，它们通常会被内联放置，导致它们之间的空格将它们分开，就像空格分隔句子中的单词一样。请注意，在HTML中

---

唯一有效的间距是您设置的

0.2rem

边距（顺便说一句）。无论按钮是内联级还是块级，这些页边距都是相同的。

您正在设置页边距，那么您应该期待什么呢？如果您想去掉空格，请使用负的边距（尽管有点脏），但不会：@abhitalks:您的标记与问题中的标记不同。@BoltClock是的，没有空格。我现在明白了，你已经详细地回答了这个问题。

button.small {
   font-size: 1.4rem;
   margin: 0 0.2rem;
   padding: 0.3rem 0.8rem;
   float: left;
}