Why Font Awesome icons have weird “margin” on top when using small font-sizes?

Question

My goal is to align font-awesome icon with div next to it. For some reason the font-awesome icons seem to have some margin on top of the icons on small font-sizes, which expands the wrapper div. The same does not occur with, for example, the p tag. Example can be found here:

https://jsfiddle.net/jaakkokarhu/Luw8dsa8/2/

Few points:

The margin is not either margin of the icon element or :before pseudoelement
It is not padding of the parent element
The icon expands the parent the same amount until the font-size is 15px

What is causing the font-awesome icons to behave accordingly? How can I set the icon and the wrapper so that the icon is not having the top "margin"?

// This text is just for removing the ridiculous "links to JS fiddle needs to be accompanied by code" warning. Ignore this.

i'm still not sure what's causing the gap in the top but you can set them all to centerby adding vertical-align:middle to your [class^="icon"] {..}. try. — Abbr
Ah yes! the gap is because of the inline-block. if you set the wrapper to font-size:0. it'll be normal again. Problem that arrises when you use inline-block is that whitespace in HTML becomes visual space on screen. — Abbr

Oz Lodriguez Oz Lodriguez · Accepted Answer · 2016-07-21T10:10:06

Inline-block fills in the what the browser believes is the font-size with your icon inside of it. It does this correctly for some and for smaller icons it enters ghost space. This is also noticeable if you add none breaking spaces in your HTML because they have "inline" in the css declaration and it tries to keep this with integrity.

Fix for this is either removing inline-block for the font-awesome class. Or add font-size: 0; in your wrapper class.

.wrapper {font-size: 0}

https://jsfiddle.net/Luw8dsa8/3/

Why Font Awesome icons have weird “margin” on top when using small font-sizes?

3 Answers