当使用小字体大小时，为什么“超凡字体”图标顶部会出现奇怪的“边距”？

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.

Answer 1

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/

Answer 2

The gap is because of [class^="icon"] { display: inline-block; }. It will behave same as p tag if you make it to display:block.

Answer 3

The culprit is [class^="icon"] { display: inline-block; } [class^="icon"] { display: inline-block; } , though I don't know why.