Question

我对HTML的最大抱怨是换行符会在元素之间增加一点点空间。（jsFiddle。）

这可能会破坏子元素大小为完全适合父母的布局。

我在某处读到你可以删除这个隐式填充 - 同时仍然保持代码有些清晰 - 通过使用这样的注释：

<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->

这很有效，但我觉得必须要有更好的解决方案。还有哪些方法可以解决换行填充？

Answer 1

这不是“一点点空间”，而是字面上的空间角色。您正在使用display: inline-block在地平线上对齐元素，这就是“内联”的工作方式。

如果您想使用inline-block，则需要在执行操作时删除元素之间的空白区域。

否则，您可以使用其他方法之一进行水平对齐，例如浮动或display: table-cell。

Answer 2

解决方案是在发布页面之前使用一些HTML压缩器，以便从标记中删除不需要的空间，例如在this示例中。

从我所看到的情况来看，他们往往总是留下一个空间，因为他们不知道你是否真的想要那个空间，而且因为浏览器只考虑第一个空间，如果不止一个，压缩机在那里留下一个空间。

Answer 3

你应该尝试使用font-size：0px; line-height：外部div为0px。

这样的事情：

<div class="outer">
  <div class="inner">123</div>
  <div class="inner">34556</div>
</div>

<style>
.outer {
  font-size:0px;
  line-height:0px;
}

.inner {
  font-size:14px;
  line-height:16px;
  display:inline-block;
}
</style>

Answer 4

这是因为您对display: inline-block;元素使用了div。

块元素剥离它们周围的空白区域，内联元素不会。

请尝试float: left;。

如何避免换行填充？

4 个答案: