html - 如何避免换行填充？

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 压缩器从标记中删除不需要的空间，就像在这个例子中一样。

但从我所见，他们往往至少会留下一个空格，因为他们不知道你是否真的想要那个空间，而且由于浏览器只考虑第一个空格（如果有多个），因此压缩器会离开一个空间。

Answer 3

你应该试试 font-size:0px; line-height:0px 用于外部 div。

像这样的东西：

<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;吧。