Question

我搜索了内联块元素之间的空间解决方案，并找到了许多解决方案（请参阅下面的一些解决方案）。

我的问题不是关于解决方案，而是关于解释：

空间的解释是什么？（为什么？怎么样？）
每种解决方案的解释是什么？
哪种解决方案在哪个浏览器上运行最佳？

＆＃13;

div.inline-block{display: inline-block; width: 50px; height: 50px;}
.parent{margin-bottom: 5px;}
.left{float: left;}
.no-font{font-size : 0;}
.minus-spacing{letter-spacing: -1em;}

＆＃13;

<!-- THE PROBLEM -->
<div class="parent">
  <div class="inline-block" style="background-color: red;"></div>
  <div class="inline-block" style="background-color: green;"></div>
  <div class="inline-block" style="background-color: blue;"></div>
  <div class="inline-block" style="background-color: yellow;"></div>            
</div>
<!-- SOLUTION 1 : set parent style "font-size : 0;" -->
<div class="parent no-font">
  <div class="inline-block" style="background-color: red;"></div>
  <div class="inline-block" style="background-color: green;"></div>
  <div class="inline-block" style="background-color: blue;"></div>
  <div class="inline-block" style="background-color: yellow;"></div>            
</div>
<!-- SOLUTION 2 : use comments" -->
<div class="parent">
  <div class="inline-block" style="background-color: red;"></div><!--
--><div class="inline-block" style="background-color: green;"></div><!--
--><div class="inline-block" style="background-color: blue;"></div><!--
--><div class="inline-block" style="background-color: yellow;"></div>            
</div>
<!-- SOLUTION 3 : reduce parent letter spacing -->
<div class="parent minus-spacing">
  <div class="inline-block" style="background-color: red;"></div>
  <div class="inline-block" style="background-color: green;"></div>
  <div class="inline-block" style="background-color: blue;"></div>
  <div class="inline-block" style="background-color: yellow;"></div>            
</div>
<!-- SOLUTION 4 : use float -->
<div class="parent">
  <div class="inline-block left" style="background-color: red;"></div>
  <div class="inline-block left" style="background-color: green;"></div>
  <div class="inline-block left" style="background-color: blue;"></div>
  <div class="inline-block left" style="background-color: yellow;"></div>            
</div>

＆＃13;

Answer 1

根据 Chris Coyier ^{（@chriscoyier）}

这不是“错误”（我不认为）。这只是在一条线上设置元素的方式。您希望键入的单词之间的空格是空格吗？ 这些块之间的空格就像单词之间的空格。这并不是说规范无法更新，说内联块元素之间的空格应该没什么，但我相当肯定是一种巨大的蠕虫，不太可能发生。

来源：css-tricks.com
^{* 引用中强调的是我的}

Answer 2

解决方案的解释：

如果您的字体大小为0，则每个字符的宽度也为0，包括空格。所以空间仍然存在，它只有0px宽但请注意，此解决方案可能并不理想。当您设置font-size:0时，某些浏览器会使用最小字体大小（来自用户的偏好设置），因此最终可能会占用较小的空间而不是空格。
注释不会呈现，因此如果您使用注释而不是空格，则不会呈现任何内容还有另一个解决方案：只是不要在源中的div之间放置任何东西;到处写</div><div>。
负字母间距使字母（因此也是单词）更加靠近。但它不会导致相邻元素重叠。
浮动还会删除所有可见空格。它有副作用，特别是如果你不清除浮子，所以要谨慎使用这个解决方案。

内联块空格的解释和解决方案

2 个答案: