div忽略样式表中的高度属性

Question

这让我很头疼。我似乎无法控制下面的div.down_arrow元素的高度 -

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

我有以下的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;
}

Safari 开发者工具告诉我，我的 div.down_arrow 的高度和宽度仍然有影响（即属性上没有横线 - 没有其他东西覆盖它们）。但屏幕上的小弹出窗口显示 div.down_arrow 的尺寸为 27px x 16px。我可以看到该元素比它包含的 img 元素要大。

我不明白发生了什么 - 看起来高度似乎是从前面的 span 元素中获取的（而我不知道影响宽度的原因）。

- Aidan Ewen

Answer 1

将 display: inline; 更改为 display: inline-block;

问题在于，您只能手动控制块级元素的宽度/高度，而不能控制行内元素。

- AlienHoboken

---

谢谢，就这样了！（不知道为什么Safari没有将我的高度属性显示为无效）。 - Aidan Ewen

Answer 2

行内元素不受高度影响。

- hank