How do I remove extra margin space generated by inline blocks? [duplicate]

Question

I am using this css to format two columns but I am still getting margin space between two. I can eliminate it with use of margin-left: -4px; or some such. Is there a more elegant way to do this or is there something wrong with the CSS code?

div.col1{   display: inline-block;   min-height: 900px;   height: 100%;   width 300px;   margin: 0px;   background-color: #272727;   overflow: hidden;   border: 1px dotted red; }  div.col2{   display: inline-block;   min-height: 900px;   height: 100%;    width: 620px;   margin: 0px;    vertical-align: top;   border: 1px dotted red;   overflow: hidden; } 

Answer 1

Perhaps you have:

<div class="col1">     Stuff 1 </div> <div class="col2">     Stuff 2 </div> 

? If so then this is probably a whitespace problem (it turns out whitespace does matter in html). This should fix it:

<div class="col1">     Stuff 1 </div><div class="col2">     Stuff 2 </div> 

Answer 2

A simple font-size:0 to the parent element will work.