如何避免換行填充？

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：外部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>

Answer 4

這是因為你使用display: inline-block; 為div元素。

塊元素剝離它們周圍的空白區域，內聯元素不會。

試試float: left; 代替。