Dlaczego są spacje między tymi elementami p, gdy margines i dopełnienie są równe zero?

Question

Oto fiddle. HTML, uproszczone, jest w zasadzie ten

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

Dzięki tej 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; 
} 

To czyni tak:

Dlaczego istnieją przestrzenie między rzędami? DOM Inspector mówi mi, że przęsła mają zerowy margines i dopełnienie, jak również znaczniki p.

Answer 1

Dodaj do span. Domyślnym jest 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>