html - 为什么将浮动左键添加到一行中的按钮会导致它们之间的间距发生变化？

Question

我有三个这样的按钮：

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

这是应用于这些的 CSS：

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

当我应用 float: left 到这些时，我注意到按钮之间的间距发生了变化。有人能告诉我这是为什么吗？它对利润或类似的东西有影响吗？

Answer 1

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

唯一有效的间距是0.2rem您设置的边距（顺便说一下不会折叠）。无论按钮是内联级还是块级，这些边距都是相同的。