div ignores height from style sheet

Question

This is driving me crazy. I can't seem to control the height of the div.down_arrow element below -

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

I've got the following 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;
}

The safari developer tools tell me that the height and width of my div.down_arrow are still having effect (ie there's no line through the attributes - nothing else is overriding them). But the little popup on the screen shows the dimensions of the div.down_arrow to be 27px x 16px. I can see that the element is larger than the img element it contains.

I don't understand what's going - it looks like the height seems to be taken from the preceding span element (and I've no idea what's effecting the width).

Answer 1

Change display: inline; to display: inline-block;

The issue is you can only manually control the width/height of block elements, not inline elements.

Answer 2

inline elements are not affected by height