मार्जिन और पैडिंग शून्य होने पर इन पी तत्वों के बीच की जगह क्यों हैं?

Question

यहां एक fiddle है।

क्यों पंक्तियों के बीच रिक्त स्थान हैं: एचटीएमएल, सरल, मूल रूप से इस

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

इस सीएसएस

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

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

यह इस तरह renders के साथ

है? डोम इंस्पेक्टर मुझे बताता है कि स्पैन में शून्य मार्जिन और पैडिंग के साथ-साथ पी टैग भी हैं।

Answer 1

vertical-align: topspan के साथ जोड़ें। डिफ़ॉल्ट 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>