Why margin-top doesn't work for <i> element?

Question

Here is my code:

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

As you see, none of padding or margin or line-height don't make my expected effect. Here is expected result:

How can I get that?

Note: Based on my real codes, I shouldn't use position: absolute; for that <i> element.

Answer 1

The margin / padding / line-height is working, you just have to add vertical-align:top to 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

Here is the changes which works

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