अनजाने में दिखाई देने वाली छवि पैडिंग को कैसे निकालें?

Question

मेरे पास एक कंटेनर में तीन छवियां हैं जिन्हें निर्बाध रूप से ढंका जाना चाहिए, लेकिन उनके बीच कुछ पैडिंग हो रही है। http://www.arbitersoflight.net/media/

बाईं तरफ के कंटेनर में तीन बड़े बटन सवाल में इस प्रकार हैं:

आप यहाँ पेज देख सकते हैं।

सीएसएस

#mainBoxFull { 
    background-image: url(/img/cont/mainfull.jpg); 
    float: left; 
    height: 560px; 
    width: 560px; 
    margin: 0px; 
    padding: 20px; 
} 

एचटीएमएल

<div id="mainBoxFull"> 
    <img src="/img/btns/media/bgal.jpg" alt="screenshot" width="560" height="180" border="0" /> 
    <img src="/img/btns/media/bvid.jpg" alt="videos" width="560" height="200" border="0" /> 
    <img src="/img/btns/media/bsoon.jpg" alt="coming soon" width="560" height="180" border="0" /> 
</div> 

Answer 1

समस्या यह है कि छवियों इनलाइन ब्लॉक हैं,:

यहाँ कंटेनर के लिए कोड है। यही है, उनके बीच की जगहों की गणना की जाती है। ये रिक्त स्थान आपको पैडिंग के रूप में होते हैं।

#mainBoxFull img { display: block; } 

और समस्या गायब होनी चाहिए। वैकल्पिक रूप से, आप div और img तत्वों के बीच स्रोत HTML में सफेद स्थान को हटा सकते हैं (सभी सफेद स्थान)।

Answer 2

एक अन्य विकल्प को हल करने एक ही समस्या है

#mainBoxFull{ font-size:0; } 

यह बीच में सभी सफेद रिक्त स्थान पर ध्यान नहीं देंगे। + आप फ़ॉन्ट आकार से कहीं भी कह सकते हैं जहां आपके पास टेक्स्ट है।