Html 如何避免换行填充？

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

如果子元素的大小恰好适合其父元素，则这可能会破坏布局

我在某个地方读到，您可以通过使用如下注释删除此隐式填充，同时保持代码的易读性：

<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</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>

FooBarAnd等等。。。

---

这是可行的，但我觉得必须有更好的解决方案。还有什么其他方法可以解决换行填充问题？

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

---

但从我所看到的情况来看，它们往往至少会留下一个空间，因为它们不知道您是否真的想要那个空间，而且由于浏览器只考虑第一个空间（如果有多个空间），压缩器会在那里留下一个空间。

您应该尝试使用字体大小：0px；线高：外部分区为0px

大概是这样的：

<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</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>

123
34556
.外部{
字体大小：0px；
线高：0px；
}
.内部{
字体大小：14px；
线高：16px；
显示：内联块；
}

这是因为您使用了

显示：内联块用于
div
元素

块元素会在其周围去除空白，而内联元素不会

尝试<代码>浮动：左。
这不是“一点点空格”，而是字面上的空格字符。您正在使用
display:inline block
水平对齐元素，这就是“inline”的工作方式

如果要使用
内联块
，则需要在执行此操作时删除元素之间的空白

否则，您可以使用其他方法之一水平对齐，例如浮动或
display:table cell
如果确实需要，我想我可以制作自己的脚本/程序来去除所有不带引号的空白。这不是一件特别难实施的事情。是的，这也是我计划一有空闲时间就做的事情。这只是一些大的文本操作，并不是什么大问题。因此，您可以根据具体情况使用您的选项对其进行自定义。我还发现了不同的用户找到其他解决方法的地方。不知何故，使用浮动似乎比在注释中填充换行符更不优雅。它不仅不优雅，而且危险程度不同。如果你使用评论，很可能你的评论太多了。浮动在布局中使用时很脆弱，窗口宽度变化太大。