问元素之间的4px差距是什么？

EN

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>