जल्दी ठीक:
छवि के अंतर को दूर करने के लिए , आप कर सकते हैं:
- छवि की लंबवत-संरेखित गुण को
vertical-align: bottom; vertical-align: top;या पर सेट करेंvertical-align: middle;
- करने के लिए छवि की प्रदर्शन संपत्ति सेट करें
display:block;
लाइव डेमो के लिए निम्न कोड देखें:
#vAlign img {
vertical-align :bottom;
}
#block img{
display:block;
}
div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>
स्पष्टीकरण: छवि के नीचे एक अंतर क्यों है?
छवि के नीचे अंतराल या अतिरिक्त स्थान बग या समस्या नहीं है, यह डिफ़ॉल्ट व्यवहार है। मूल कारण यह है कि छवियों को प्रतिस्थापित तत्व हैं ( एमडीएन प्रतिस्थापित तत्वों को देखें )। यह उन्हें "छवि की तरह कार्य करने" की अनुमति देता है और उनके स्वयं के आंतरिक आयाम, पहलू अनुपात होते हैं ....
ब्राउज़र्स अपनी प्रदर्शन संपत्ति की गणना करते हैं, inlineलेकिन वे उन्हें एक विशेष व्यवहार देते हैं जो उन्हें inline-blockतत्वों के करीब बनाता है (जैसा कि आप उन्हें ऊर्ध्वाधर संरेखित कर सकते हैं, दे सकते हैं) उन्हें एक ऊंचाई, ऊपर / नीचे मार्जिन और पैडिंग, रूपांतरित ...)।
इसका मतलब यह भी है कि:
<img>कोई आधार रेखा नहीं है, इसलिए जब छवियों को ऊर्ध्वाधर-संरेखण के साथ एक इनलाइन प्रारूपण संदर्भ में उपयोग किया जाता है: आधार रेखा, छवि के नीचे पाठ आधारभूत पर रखा जाएगा।
( स्रोत: एमडीएन , जोर मेरा )
जैसे कि डिफ़ॉल्ट रूप से ब्राउज़र वर्टिकल-अलाइन प्रॉपर्टी को बेसलाइन में कंपेयर करता है, यह डिफॉल्ट बिहेवियर है। निम्न छवि से पता चलता है कि पाठ पर आधार रेखा कहाँ स्थित है:
( छवि स्रोत )
बेसलाइन संरेखित तत्वों को बेसलाइनर (जैसे ) से नीचे उतरने वाले अवरोही के लिए जगह रखने की आवश्यकता है जैसा j, p, g ...कि आप ऊपर की छवि में देख सकते हैं। इस विन्यास में, छवि का तल आधार रेखा पर संरेखित है जैसा कि आप इस उदाहरण में देख सकते हैं:
div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>
यही कारण है कि <img>टैग का डिफ़ॉल्ट व्यवहार कंटेनर के नीचे एक अंतर बनाता है और क्यों ऊर्ध्वाधर-संरेखित संपत्ति या प्रदर्शन संपत्ति को बदलना इसे निम्न डेमो में हटाता है:
div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}
.block img{
display:block;
}
.bottom img{
vertical-align:bottom;
}
<p>Default:</p>
<div>
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
