div stil sayfasındaki yüksekliği yok sayan

Question

Bu beni deli ediyor. Aşağıdaki css var

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

- - Aşağıda div.down_arrow elemanın yüksekliğini kontrol etmek gibi olamaz

#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 geliştirici araçları söyle o yüksekliği ve genişliği benim div.down_arrow hala yürürlükte (yani özniteliklerde satır yok - başka hiçbir şey onları geçersiz kılıyor). Ancak ekrandaki küçük açılır pencere, 'un boyutlarının 27px x 16px olduğunu gösterir. Öğenin içerdiği img öğesinden daha büyük olduğunu görebiliyorum.

Neler olup bittiğini anlamıyorum - yükseklik önceki yayılan öğeden alınacak gibi görünüyor (ve genişliği etkileyen şey hakkında hiçbir fikrim yok).

Answer 1

Değişim display: inline; etkilenmez sorun, yalnızca el blok elemanları, değil satır içi öğeler genişlik/yükseklik kontrol edebilirsiniz olduğunu.

Answer 2

satır içi öğeler display: inline-block;

için yükseklik