Question

默认情况下，某些设置中的元素之间似乎存在4px的差距（参见示例），为什么它甚至存在？我怀疑如果修复它会产生任何不良影响。

使用flex-box修复了这个问题，但我仍然不知道它存在的原因，以及它是在加载时生成还是在用JavaScript创建的元素之间存在差异。

for(var i = 0; i < 8; i++) {
   $(".js").append('<div class="box"></div>');
}

body {
  font-family: sans-serif;
}
body > div {
  width: 440px;
  padding: 10px;
  background-color: #eee;
}
body > div .box {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 0px;
  box-shadow:inset 0 0 0 1px #000,inset 0 0 12px 0 #fff;
}
body > div.inline-block .box {
  display: inline-block;
}
body > div.inline .box {
  display: inline;
}
body > div.flex-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<h2>Block</h2>
<p>4px gap not present.</p>
<div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>

<h2>Inline-Block</h2>
<p>4px gap present.</p>
<div class="inline-block">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>
 
<h2>Inline</h2>
<p>4px gap present.</p>
<div class="inline-block">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>

<h2>Flex with wrap</h2>
<p><i>What I normally use so this problem isn't much of an issue for me anyway.</i></p>
<p>4px gap not present.</p>
<div class="flex-wrap">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>

<h2>Populating with JS with Inline-block</h2>
<p>4px gap present only in the y direction.</p>
<div class="js inline-block">
   
</div>

Answer 1

内联/内联块元素之间的空白区域将保留在布局中。要删除它，删除元素之间的实际空格，在元素之间放置HTML注释以删除空格，或将父级的字体大小更改为0，然后根据需要重置子项中的字体大小。

您可以在更传统的内嵌元素（如跨度）中看到相同的空间，如果您使用它们，您可能会看到它们。

<span>one</span> <span>two</span> <span>three</span>
<br>
<span>no</span><span>space</span>
<br>
<span>no</span><! --><span>space</span>

元素之间的4px差距是多少？

1 个答案: