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

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

You should also specify:

padding: 0;

Answer 2

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 3

apply float:left and that will remove the space so the text doesn't have to be on 1 line.