如何避免换行填充？答案

【问题标题】：How Do I Avoid Line-Break Padding?如何避免换行填充？
【发布时间】：2011-08-25 06:06:48
【问题描述】：

我对 HTML 最大的不满是换行符在元素之间增加了一点点空间。 (jsFiddle.)

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

我在某处读到，您可以通过使用这样的 cmets 删除此隐式填充 - 同时仍保持代码清晰易读：

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

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

【问题讨论】：

我还找到了this related question，各种用户在其中找到了其他解决方法。

标签： html layout code-formatting code-readability

【解决方案1】：

这不是“一点点空间”，而是字面意义上的空间字符。您正在使用 display: inline-block 水平对齐元素，这就是“内联”的工作原理。

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

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

【讨论】：

【解决方案2】：

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

据我所见，他们倾向于至少留一个空格，因为他们不知道你是否真的想要那个空格，而且如果有多个空格，浏览器只会考虑第一个空格, 压缩机会留一个空间。

【讨论】：

如果我真的需要的话，我想我总是可以制作自己的脚本/程序来去除所有未加引号的空格。实施起来并不是特别困难的事情。
是的，这也是我一有空闲时间就打算做的事情。这只是一些大的文本操作，并不是什么大事。因此，您可以根据情况使用您的选项对其进行自定义。

【解决方案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>

【讨论】：

【解决方案4】：

这是因为您将display: inline-block; 用于div 元素。

块元素会去除它们周围的空白，内联元素不会。

改用float: left;。

【讨论】：

不知何故，使用浮点数似乎比在 cmets 中填充换行符更不优雅。
它不是不那么优雅，而是不同的危险。如果你使用 cmets，很可能你的评论太多了。浮动在布局中使用时很脆弱，并且窗口宽度变化太大。