為什么margin-top不適用於

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> 

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>