Baseline is taller when font-family defined on body

Question

Today I found a strange behavior when I used IonIcons.

When the body has font-family property the baseline (Am I right? Is it the baseline?!) is bigger.

enter image description here

If you remove the font-family property from the body the size is perfect. Do you know guys the reason of this behavior?

body {
    font-family: Arial;
}

ul {
    list-style:none;
    margin:0;
    padding:0;
    line-height:80px;
    background:yellow;
    overflow:hidden;
    font-size:2em;
}

li {
    display:inline-block;
    float:left;
    padding:0 20px;
}

a {
    display:inline-block;
}

.box {
    width:1em;
    height:1em;
    background:red;
    display:inline-block;
    vertical-align:middle;
}

i {
    background:red;
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<ul>
    <li><a href=""><i class="ion-close"></i></a></li>
    <li><a href=""><span class="box"></span></a></li>
</ul>

UPDATE: http://psd-labs.com/demo/ - I would like to align the blue box center, vertically. I used vertical-align:center;, but it doesn't work because of the font on the body. When I remove font the align is perfect.

Different fonts can have different line-heights, baselines etc. And by removing `font-family: Arial` from `body`, the font-family specified in the browser’s default stylesheet gets used. Go use your browser’s developer tools to find out which one that is. — CBroe, Apr 18 '15 at 14:20
Yes it's true, but the default font overridden by the icon font. — user1452062, Apr 19 '15 at 07:00
No, for `body` the default font is of course not overwritten by the icon font … the icon font is only applied to the elements that you add the respective classes to. — CBroe, Apr 19 '15 at 07:56
Yes, but when I change the font for `body` the baseline changes for the icon and I don't understand this behavior. — user1452062, Apr 19 '15 at 08:21
I updated the post with a complete demo: http://psd-labs.com/demo/ - I would like to align the blue box center, vertically. I used `vertical-align:center;`, but it doesn't work because of the font on the body. When I remove font the align is perfect. — user1452062, Apr 19 '15 at 08:55

Baseline is taller when font-family defined on body

0 Answers0