How to put divs in a row with "display: inline-block", without a margin?

Question

Whenever I put divs in a horizontal row using display:inline-block, there's always a margin between them, even if I set margin: 0 !important. Is there a way to have exactly 0 pixels between the divs?

Here's a basic example where I have three black boxes that should be continuous, but there's white space between them: (Fiddle)

.div {
  position: relative;
  display: inline-block;
  background: black;
  width: 100px;
  height: 100px;
  margin: 0 !important;
}

<div class="div"></div>
<div class="div"></div>
<div class="div"></div>

Solution 1

It is because of the new line between the elements. You could comment it like I did, or make those elements inline with each other

.div {
  position: relative;
  display: inline-block;
  background: black;
  width: 100px;
  height: 100px;
  margin: 0 !important;
}

<div class="div"></div><!--
--><div class="div"></div><!--
--><div class="div"></div>

Solution 2

You should give the font-size: 0 to the parent container. The font size is giving those small margins to the inline blocks.

.div {
  position: relative;
  display: inline-block;
  background: black;
  width: 100px;
  height: 100px;
  margin: 0 !important;
}
.container {
  font-size: 0;
}

<div class="container">
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
</div>

Solution 3

.divlist {
  position: relative;
  font-size: 0;
}
.div {
  position: relative;
  display: inline-block;
  background: black;
  width: 100px;
  height: 100px;
  font-size: 16px;
}

<div class="divlist">
  <div class="div"></div>
  <div class="div"></div>
  <div class="div"></div>
</div>