Html 内联块空白解释与解决方案

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

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

• 空间的解释是什么？（为什么？如何？）
• 每个解决方案的解释是什么
• 哪种解决方案在哪种浏览器上最有效

div.inline-block{display:inline块；宽度：50px；高度：50px；}
.parent{margin bottom:5px；}
.left{float:left；}
.no字体{字体大小：0；}
.减间距{字母间距：-1em；}

根据Chris Coyier（）

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

来源：
*引用中强调的是我的

根据Chris Coyier的说法（）

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

来源：

---

*引用中强调的是我对解决方案的解释：

如果字体大小为0，则每个字符的宽度也为0，包括空格。所以空间仍然存在，只有0px宽。
但是请注意，此解决方案可能并不理想。当您设置

字体大小：0

时，某些浏览器将使用最小字体大小（根据用户的首选项），因此您可能会得到一个小空间，而不是没有空间

注释不会呈现，因此如果使用注释而不是空格，则不会呈现任何内容。
还有另一个解决方案：不要在源代码中的div之间放置任何内容；到处写

负字母间距使字母（因此也包括单词）靠得更近。但这不会导致相邻元素重叠

浮动也会删除所有可见的空白。但是它有副作用，特别是如果你没有清除浮动，所以要谨慎使用这个解决方案

---

对解决办法的解释：

如果字体大小为0，则每个字符的宽度也为0，包括空格。所以空间仍然存在，只有0px宽。
但是请注意，此解决方案可能并不理想。当您设置

字体大小：0

时，某些浏览器将使用最小字体大小（根据用户的首选项），因此您可能会得到一个小空间，而不是没有空间

注释不会呈现，因此如果使用注释而不是空格，则不会呈现任何内容。
还有另一个解决方案：不要在源代码中的div之间放置任何内容；到处写

负字母间距使字母（因此也包括单词）靠得更近。但这不会导致相邻元素重叠

浮动也会删除所有可见的空白。但是它有副作用，特别是如果你没有清除浮动，所以要谨慎使用这个解决方案