div ignoruje wysokość z arkusza stylów

Question

To doprowadza mnie do szału. I nie wydaje się, aby kontrolować wysokość elementu poniżej div.down_arrow -

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

Mam następujące CSS -

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

Narzędzia safari developer powiedzieć, że wysokość i szerokość mój div.down_arrow nadal mają efekt (tj. Nie ma linii przez atrybuty - nic więcej nie jest nadrzędne). Ale małe okienko na ekranie pokazuje wymiary o rozmiarze 27 x 16 pikseli. Widzę, że element jest większy niż element img, który zawiera.

Nie rozumiem, co się dzieje - wygląda na to, że wysokość pochodzi z poprzedniego elementu span (i nie mam pojęcia, co wpływa na szerokość).

Answer 1

Zmień display: inline; do display: inline-block;

Zagadnienie to można tylko ręcznie sterować szerokość/wysokość elementów blokowych, a nie elementów inline.

Answer 2

elementy inline nie są dotknięte wysokości