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

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>