remove margin between relatively positioned elements

Question

I have some relatively positioned inline-block elements side-by-side within a parent, and I've applied a margin:0 to all children of the parent, but they still have some space in between them. What's happening here?

#parent {
  height: 100px;
}
#parent * {
  margin: 0;
}
#parent div {
  display: inline-block;
  position: relative;
  border: 1px solid red;
  width: 50px;
  height: 100%;
}

<div id="parent">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

You have white space between your inline-block elements. If you have 100% control over your DOM, make sure there is absolutely no white space between your markup. If you don't have control over it, you can use a little workaround by doing the following:

1. set the font-size of the container to 0px.
2. reset the the font size of the inline-elements by using font-size: 1rem;

Here is a fiddle to demonstrate:

http://jsfiddle.net/ucuzpb4d/

#parent {
  height: 100px;
  font-size: 0px;
}
#parent * {
  margin: 0;
}
#parent div {
  font-size: 1rem;
  display: inline-block;
  position: relative;
  border: 1px solid red;
  width: 50px;
  height: 100%;
}

Here is the fiddle with no white-space: http://jsfiddle.net/ucuzpb4d/1/