html - remove margin between relatively positioned elements -

this question has answer here:

• how remove space between inline-block elements? 31 answers

i have relatively positioned inline-block elements side-by-side within parent, , i've applied margin:0 children of parent, still have 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>

you have white space between inline-block elements. if have 100% control on dom, make sure there absolutely no white space between markup. if don't have control on it, can use little workaround doing following:

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

here fiddle 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 fiddle no white-space: http://jsfiddle.net/ucuzpb4d/1/