Vertical Gap Between Divs

Recently, I discovered a very simple solution to what I believe is a pretty major problem. I first encountered the issue when first building my own grid, and I kind of "hacked" around it. I've been working on rewriting that grid (coming soon), and decided to find a better solution.

The Symptom

In a word: "whitespace". Simplest example I can think of, is 2 <div>s with CSS that includes display: inline-block; and width: 50%; should be placed side by side. BUT THEY ARE NOT

Take a look:

See the Pen Grid System Demo by Mark Rabey (@MarkRabey) on CodePen.

The Solution(s)...maybe

There are many ways I could have solved this. Simply adding float: left; to the .grid__item class and that would work, but it's not really accurate. In the context of this grid, the elements are not floating. They are placed beside each other. This is essentially what I ended up doing in that first grid, but it lead to issues later having to clear that float.

Of course making them slightly less than 50% width makes them appear on the same line, but that's not quite right. I can play with margins, but that doesn't really make sense. Again, trying to be somewhat semantic in my thinking, each .grid__item is independent, so adjusting the margin and padding to accommodate others isn't really accurate either.

There are a few other CSS hacks, but these aren't likely to work in every browser, and may not work forever (I might post about these soon too). I don't really want to rely on CSS to fix the issue at all, because it's not really a CSS problem.

The Problem

The actual problem lies in the HTML itself. Or at least in how some browsers render the HTML. That whitespace between the two .grid__items is actually rendered as a small gap. Currently in my browser this gap is 5 pixels. I'm honestly not sure if this changes or why it's there, but I want it gone!

The Actual Solution (mine at least)

Remove the whitespace! I don't want to just remove that gap. I still need to be able to read the code, and that won't go well if I remove the gap entirely. I came up with 2 solutions. In both cases I am leaving the CSS alone! I'm not sure which on I prefer yet. In one, I add an empty comment (<!-- -->) between the <div>s. The other one is to not close one <div> until the next. Here's what that looks like:

<div class="grid">
  <div class="grid__item">
    <p class="demo-content">
      Grid Item 1
    </p>
  </div><!--

  --><div class="grid__item">
    <p class="demo-content">
      Grid Item 2
    </p>
  </div><!--

  --><div class="grid__item">
    <p class="demo-content">
      Grid Item 3
    </p>
  </div

  ><div class="grid__item">
    <p class="demo-content">
      Grid Item 4
    </p>
  </div>
</div>

See the Pen Grid System Demo by Mark Rabey (@MarkRabey) on CodePen.

I'm thinking I prefer the latter method. It seems more readable, but I'll likely go back and forth for few weeks before deciding for sure. Thoughts and comments appreciated.