डिव कोई कारण नहीं

Question

मैं तो जैसे कुछ मार्कअप है के लिए अतिरिक्त ऊंचाई हो जाता है:

<div class="account-picture"> 
    <img src="http://i.imgur.com/Mcr3l.png"> 
</div> 

div जरूरतों बाईं जारी किया जाना है। छवि 128px x 128px है।

और कुछ सीएसएस:

.account-picture{ 
    float: left; 
    background: #FFFFFF; 
    padding: 10px; 
    border: 1px solid red; 
    font-size: 1px; 
    overflow: hidden; 
} 

img{ 
    border: 1px solid #F8F8F8; 
    overflow: hidden; 
} 

लेकिन समस्या यह है वहाँ div करने के लिए सौंपा कुछ अतिरिक्त ऊंचाई हो रहा है। फायरबग से लेआउट आरेख इस प्रकार हैं:

div की ऊंचाई 2 अतिरिक्त पिक्सेल क्यों हो रही है? यह ब्राउज़र में क्यों भिन्न होता है?

• फ़ायरफ़ॉक्स 12: 2px अतिरिक्त
• IE9: 0.26px अतिरिक्त
• क्रोम: 0px अतिरिक्त।

और यहाँ एक बेला है: http://jsfiddle.net/mWe5Y/

हो रहा क्यों है, और कैसे मुझे लगता है कि अतिरिक्त "ऊंचाई" से छुटकारा मिलता है?

Answer 1

क्योंकि आईएमजी एक इनलाइन तत्व है।

कि अतिरिक्त ऊंचाई से छुटकारा पाने के लिए:

.account-picture img { 
    display: block; 
}