7

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

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

我在某处读到,您可以通过使用如下注释删除此隐式填充 - 同时仍保持代码清晰易读:

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

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

4

4 回答 4

4

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

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

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

于 2011-08-25T08:51:14.227 回答
1

一个解决方案是在发布页面之前使用一些 HTML 压缩器从标记中删除不需要的空间,就像在这个例子中一样。

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

于 2011-08-25T06:57:39.827 回答
1

你应该试试 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>
于 2011-08-25T08:41:19.217 回答
1

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

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

试试float: left;吧。

于 2011-08-25T08:50:46.943 回答