0

There seems to be a 4px gap between elements by default in certain settings (see example), why does it even exist? I doubt it would have any bad effect if it was fixed.

Using flex-box fixes the issue but I still don't know why it exists and with a difference between if it is generated on load or elements created with 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>
Zed
  • 651
  • 1
  • 5
  • 25

1 Answers1

6

The white space between inline/inline-block elements is preserved in the layout. To remove it, remove the actual spaces between elements, put an HTML comment between the elements to remove the white space, or change the font-size of the parent to 0, then reset the font-size in the children if needed.

You see the same space in more traditional inline elements like spans, too, which you may expect to see if you've used them.

<span>one</span> <span>two</span> <span>three</span>
<br>
<span>no</span><span>space</span>
<br>
<span>no</span><! --><span>space</span>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • Oh dang super obvious now you pointed it out :s, although it only removes the spaces in the x direction; there's still a 4 px gap between rows. – Zed Feb 19 '17 at 16:06
  • 1
    @OfficialAntarctica have you ever noticed that there is a gap at the bottom of an image by default? It's the same thing. Images are inline elements and there is a line-height on the element creating the vertical space. Either change the element to `block` or assign `vertical-align` to `top/bottom/middle` or most values other than the default and it will go away. – Michael Coker Feb 19 '17 at 16:10
  • Oki, but why is it there in the first place? – Zed Feb 19 '17 at 16:10
  • @MichaelCoker what do you mean by "there is a line-height on the element creating the vertical space" – gaurav5430 Dec 16 '18 at 15:56
  • @gaurav5430 `line-height` might not be the right word. What it is is space for the bottom part of characters like p, q, j, y, etc. `line-height: 0` should fix it, too. – Michael Coker Dec 17 '18 at 15:33