如何避免换行填充？

发布于 2024-12-01 19:46:45 字数 428 浏览 2 评论 0原文

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

这可能会搞乱子元素大小精确的布局适合他们的父母。

我在某处读到，您可以通过使用这样的注释来删除这种隐式填充 - 同时仍然保持代码的可读性：

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

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

原文

My biggest gripe with HTML is that line breaks add a tiny bit of space between elements. (jsFiddle.)

This can screw up layouts where child elements are sized to exactly fit their parents.

I read somewhere that you can remove this implicit padding - while still keeping the code somewhat legible - by using comments like this:

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

This works, but I feel like there has to be a better solution. What other ways are there to work around the line-break padding?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谁与争疯 2024-12-08 19:46:45

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

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

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

回复收藏 0 原文

原谅过去的我 2024-12-08 19:46:45

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

但从我所看到的来看，他们倾向于至少留下一个空间，因为他们不知道你是否真的想要那个空间，并且由于浏览器只考虑第一个空间（如果有多个空间），压缩器会留下那里有一个空格。

回复收藏 0 原文

迷你仙 2024-12-08 19:46:45

你应该尝试 font-size:0px;外部 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>

You should try font-size:0px; line-height:0px for outer div.

Something like this:

<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>

回复收藏 0 原文