Divs still have spaces even though margin and padding is zero

Question

I'm running into an issue where I cannot remove the spaces between divs. I've included my markup and css and a fiddle: http://jsfiddle.net/kW5uW/12/

Despite having set margin and padding to zero, I still see spaces in between the divs, how can I remove this? I want all the boxes to be right next to each other.

CSS and Markup:

.segment {
  width: 20px;
  height: 20px;
  background: grey;
  border: 1px solid black;
  display: inline-block;
  padding: 0px;
  margin: 0px;
}

.container {
  padding: 0px;
  margin: 0px;
}

<div class="container">
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
</div>

Any advice would be appreciated. Thanks.

Answer 1

Inline elements are sensitive to white space. One way to fix this is to just remove the white space between the divs:

<div class="container">
    <div class="segment"></div><div class="segment"></div><div class="segment"></div><div class="segment"></div><div class="segment"></div>
</div>

jsFiddle example

You could also:

• Float them left (jsFiddle example)
• Set the font size on the parent div to zero (jsFiddle example)
• Take up the white space with HTML comments (jsFiddle example)

Answer 2

I was able to fix this, by changing your segment class CSS to the following:

.segment {
    width: 20px;
    height: 20px;
    background: grey;
    border: 1px solid black;
    display: block;
    float: left;
    padding: 0px;
    margin: 0px;
}