html - 为什么向一行中的按钮添加 float-left 会导致它们之间的间距发生变化？

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

float 按钮将它们变成 block 级元素。因此，标记中按钮之间的空白无效。如果不 float 它们，它们通常会内嵌放置，导致它们之间的空白将它们分开，就像空格分隔句子中的单词一样。请注意，在 HTML 中，contiguous whitespace sequences behave as if they were a single regular space character .

唯一有效的间距是您设置的 0.2rem 边距(顺便说一句 don't collapse )。无论按钮是行内级还是 block 级，这些边距都是相同的。