divはスタイルシートからの高さを無視します

Question

これは私を狂ってしまいます。私は次のCSSを持って

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

Safariデベロッパツールが教えているの高さと幅の私div.down_arrowはまだ影響を及ぼしています（つまり、属性を通る行はありません - それ以外のものは上書きしません）。しかし、画面上の小さなポップアップでは、div.down_arrowのサイズが27px x 16pxになっています。要素が含まれているimg要素よりも大きいことがわかります。

私は何が起こっているのか理解していません。先のスパン要素から高さが取られているように見えます（幅に何が影響しているかわかりません）。

Answer 1

変更display: inline;に影響されない問題は、手動でのみブロック要素ではなく、インライン要素の幅/高さを制御することができます。

Answer 2

インライン要素がdisplay: inline-block;

に高さ