为什么margin-top对<i>元素不起作用？

Question

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

我怎么能得到它？

注意：根据我的实际代码，我不应该将position: absolute;用于<i>元素。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是可行的更改

.fa-caret-down{
    top: 6px;
    position : relative;
}

<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>