javascript - 为什么 margin-top 不适用于 <i> 元素？

Question

这是我的代码:

.fa-caret-down{
    margin-top: 3px;
    padding-top:3px;
    line-height: 3;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div><span>something</span> <i class="fa fa-caret-down" aria-hidden="true"></i></div>

如您所见，padding 都没有或margin或line-height达不到我预期的效果。这是预期结果:

我怎样才能得到它？

注意:根据我的真实代码，我不应该使用 position: absolute;为此<i>元素。

Answer 1

margin/padding/line-height 正常工作，您只需添加 vertical-align:top 到 span

 span{
   vertical-align:top;
 }
.fa-caret-down{
    margin-top: 3px;
    padding-top:3px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div><span>something</span> <i class="fa fa-caret-down" aria-hidden="true"></i></div>