Why are the spaces between these p elements when margin and padding are zero?

Question

Here's a fiddle. The HTML, simplified, is basically this

<div id="canvas">
   <p><span></span><span></span></p>
   <p><span></span><span></span></p>
</div>

With this CSS

#canvas p
{
    margin: 0;
    border: 0;
    padding: 0;
}

#canvas p span
{
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: thin solid black;
    display: inline-block;
}

It renders like this:

Why are there spaces between the rows? DOM Inspector tells me the spans have zero margin and padding as well as the p tags.

Answer 1

Add vertical-align: top to span's. Default is baseline

Fiddle

#canvas p {
  margin: 0;
  border: 0;
  padding: 0;
}
#canvas p span {
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: thin solid black;
  display: inline-block;
  vertical-align: top;
}

<div id="canvas">
  <p><span id="p-1_1" style="background: blue none repeat scroll 0% 0%;"></span><span id="p0_1" style="background: blue none repeat scroll 0% 0%;"></span><span id="p1_1" style="background: blue none repeat scroll 0% 0%;"></span>
  </p>
  <p><span id="p-1_0" style="background: blue none repeat scroll 0% 0%;"></span><span id="p0_0" style="background: blue none repeat scroll 0% 0%;"></span><span id="p1_0" style="background: blue none repeat scroll 0% 0%;"></span>
  </p>
  <p><span id="p-1_-1" style="background: blue none repeat scroll 0% 0%;"></span><span id="p0_-1" style="background: blue none repeat scroll 0% 0%;"></span><span id="p1_-1" style="background: blue none repeat scroll 0% 0%;"></span>
  </p>
</div>