2011-02-01 18 views
9

ऊंचाई विनिर्देशों के बिना, <div> (या <p> या कोई अन्य समान तत्व) जिसमें केवल एक ही छवि होती है उससे थोड़ा अधिक है। ऐसा लगता है कि यह फ़ायरफ़ॉक्स में 4px अधिक है और क्रोम में 5px अधिक है (फ़ायरबग और उसके क्रोम समतुल्य के अनुसार)। अतिरिक्त स्थान छवि के नीचे जोड़ा गया है।ब्लॉक स्तर तत्व छवि में से अधिक क्यों है?

स्पष्ट रूप से मैं इसे div को ऊंचाई निर्दिष्ट करके इसे ठीक कर सकता हूं, लेकिन मैं समझना चाहता हूं कि वह जगह क्यों है और गीली है इसे खत्म करने का एक तरीका है।

उत्तर

18

Image इनलाइन स्तर तत्व है, इस प्रकार यह लाइन-ऊंचाई सेटिंग का पालन करता है और इसे डिफ़ॉल्ट रूप से टेक्स्ट की आधार रेखा पर सेट किया जा रहा है।

आप vertical-align: bottom के लिए छवि सेट हो जाएगा अगर यह वंश लाइन (पाठ लाइन के बिल्कुल नीचे)

अन्य विकल्प display: block करने के लिए छवि सेट और यह सब इनलाइन नौटंकी को छोड़ करने के लिए है पर चित्र का स्थान होगा

6

सीएसएस में जोड़ें:

img {display: block;} 

डिफ़ॉल्ट img तक display:inline इस प्रकार सभी पाठ लाइन से संबंधित सामान है।

+0

आमतौर पर सभी छवियों के लिए ब्लॉक करने के लिए स्विच से ऊपर, यदि आप केवल निर्दिष्ट करना चाहते हैं - क्लास चयनकर्ता या मूल तत्व से संबंध – gertas

0

line-height: 0px;में तत्व जोड़ें।

imgdisplay:block करने के लिए सेटिंग भी काम करता है, लेकिन अगर किसी और किसी ऐसे स्थान पर आप छुपा रहे हैं और छवियों display:none/display:inline साथ दिखा टूट सकता है।

संबंधित मुद्दे