我有三个这样的按钮:
<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 到这些时,我注意到间距 按钮之间的变化。有人可以告诉我为什么吗 这是?它对利润或类似的东西有影响吗?
最佳答案
float 按钮会将它们变成 block 级元素。因此,标记中按钮之间的空白不起作用。如果不 float 它们,它们通常会内联放置,导致它们之间的空格将它们分开,就像空格分隔句子中的单词一样。请注意,在 HTML 中,contiguous whitespace sequences behave as if they were a single regular space character .
唯一仍然有效的间距是您设置的 0.2rem
边距(顺便说一下 don't collapse )。无论按钮是内联级还是 block 级,这些边距都是相同的。
关于html - 为什么向一行中的按钮添加 float-left 会导致它们之间的间距发生变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19512990/