div स्टाइल शीट से ऊंचाई को अनदेखा करता है

Question

यह मुझे पागल कर रहा है।

... 
<div id="filters"> 
    ... 
    <span>All</span> 
    <div class="down_arrow"> 
     <img src="images/down_arrow.png" alt=""/> 
    </div> 
    ... 
</div> 
... 

मैं निम्नलिखित सीएसएस मिल गया है - - मैं नीचे div.down_arrow तत्व की ऊंचाई को नियंत्रित नहीं कर पा रहे

#filters { 
    float: right; 
    padding: 24px 10px 0 0; 
} 

#filters div { 
    display: inline; 
} 

#filters div.down_arrow, 
#filters div.down_arrow img { 
    height: 12px; 
    width: 23px; 
} 

#filters div.down_arrow:hover ing { 
     opacity: 0; 
} 

सफारी डेवलपर उपकरण ने मुझे बताया कि ऊंचाई की चौड़ाई मेरी div.down_arrow अभी भी प्रभाव डाल रहे हैं (यानी गुणों के माध्यम से कोई पंक्ति नहीं है - कुछ भी उन्हें ओवरराइड नहीं कर रहा है)। लेकिन स्क्रीन पर छोटा पॉपअप div.down_arrow के आयामों को 27px x 16px होने के लिए दिखाता है। मैं देख सकता हूं कि यह तत्व img तत्व से बड़ा है।

मुझे समझ में नहीं आता कि क्या हो रहा है - ऐसा लगता है कि ऊंचाई पिछले अवधि तत्व से ली गई है (और मुझे नहीं पता कि चौड़ाई को प्रभावित करने वाला क्या है)।

Answer 1

बदलें display: inline; से प्रभावित नहीं हैं इस मुद्दे को आप केवल मैन्युअल रूप से ब्लॉक तत्वों, नहीं इनलाइन तत्वों की चौड़ाई/ऊंचाई को नियंत्रित कर सकते है।

Answer 2

इनलाइन तत्वों display: inline-block;

को ऊंचाई