मेरे <a> तत्व के तहत दिखाई देने वाले अतिरिक्त पैडिंग के 4px कैसे आते हैं?

Question

H3LLO,

किसी कारण के लिए वहाँ एक तत्व के तहत दिखाई दे रहा अतिरिक्त गद्दी की 4px है। मैं इस मैनिफेस्ट को फ़ायरफ़ॉक्स और क्रोम दोनों में देख रहा हूं। मुझे इस घटना को अपने शुरुआती दिनों में फ़्लिकर पर देखना याद है, सिवाय इसके कि यह एक नीली बार थी जो तत्वों में लिपटे के नीचे दिखाई दे रही थी।

यहां एक link to the example code है जो मेरी समस्या का वर्णन करता है। पृष्ठभूमि: रंग लाल और सीमा है: img रंगीन ग्रे रंग दिया गया है। जैसा कि आप देख सकते हैं, तत्व आईएमजी से नीचे 4px तक फैला रहा है।

देखने के लिए कोड सिर्फ लिंक है कि शीर्ष दाएं कोने में प्रकट होता है जब आप खिड़की पर ले जाएं, "JSBIN का उपयोग कर संपादित करें" दबाएँ।

से छुटकारा पाने के तरीके पर कोई विचार तत्व का अतिरिक्त नीचे पैडिंग?

धन्यवाद
एडम

Answer 1

अपने img सीएसएस गुणों के vertical-align:bottom; जोड़ें।

Answer 2

मैं सकारात्मक नहीं हूं कि ऐसा क्यों होता है, लेकिन आप इसे ठीक करने के लिए YUI Reset आज़मा सकते हैं।

Answer 3

a {display: inline-block} 
img {display: block} 

चित्र डिफ़ॉल्ट रूप से इनलाइन गाया जाता है और आप display: block या vertical-align: bottom जोड़ने के लिए समस्या का समाधान हो।