内联块空白解释和解决方案 [英] Inline-block blank space explanation and solution

问题描述

我在解决方案中搜索了内联块元素之间的空间，我发现了很多解决方案（见下面的一些解决方案）。

I searched the solution for space between inline block elements, and I found many solutions (see some of these solution below).

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

My question is not about solutions, it's about explanation :

• 空格的解释是什么？


• 每个解决方案的解释是什么？


• 哪个解决方案适用于哪种浏览器？

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

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

推荐答案

^{（ @chriscoyier ）}

这不是一个bug它只是在一行上设置元素的方式工作。你想要输入的单词之间的空格是空格吗？ 这些块之间的空格就像单词之间的空格。这不是说规范不能更新为说明inline-block元素之间的空格应该没什么，但我相当肯定

This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.

资料来源： css-tricks.com

^{* 报价中强调的是我的}

Source: css-tricks.com
^{* the emphasized in the quote is mine}

这篇关于内联块空白解释和解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！