div ignoriert Höhe von Stylesheet

Question

Das macht mich verrückt. Ich kann nicht scheinen, um die Höhe des div.down_arrow Element unten zu steuern -

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

ich folgende CSS haben -

#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; 
} 

Die Safari-Entwickler-Tools sagen mir, dass die Höhe und Breite meiner div.down_arrow haben immer noch Wirkung (dh es gibt keine Linie durch die Attribute - nichts anderes ist außer Kraft gesetzt). Aber das kleine Popup auf dem Bildschirm zeigt die Abmessungen des div.down_arrow zu 27px x 16px. Ich kann sehen, dass das Element größer als das img Element ist, das es enthält.

Ich verstehe nicht, was los ist - es sieht so aus, als ob die Höhe von dem vorhergehenden Span-Element genommen wird (und ich habe keine Ahnung, was die Breite beeinflusst).

Answer 1

ändern display: inline;-display: inline-block;

Das Problem betroffen sind, ist nur manuell die Breite/Höhe von Blockelementen steuern, nicht Inline-Elemente.

Answer 2

Inline-Elemente durch die Höhe nicht