stack stack - 3 months ago 11
CSS Question

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

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:

enter image description here

How can I get that?

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

QoP QoP
Answer

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>