我的目标是将font-awesome图标与旁边的div对齐。出于某种原因，字体很棒的图标似乎在小字体大小的图标上有一些余量，这扩展了包装div。例如，p标签不会发生同样的情况。示例可以在这里找到：
https://jsfiddle.net/jaakkokarhu/Luw8dsa8/2/
几点：
是什么导致字体真棒图标的行为相应？如何设置图标和包装器，使图标没有顶部“边距”？
// This text is just for removing the ridiculous "links to JS fiddle needs to be accompanied by code" warning. Ignore this.
答案 0 :(得分：3)
内联块填充浏览器认为的字体大小，其中包含您的图标。它为某些人正确地做到这一点，对于较小的图标，它进入了鬼魂空间如果你在HTML中没有添加空格，因为它们在css声明中有“inline”并且它试图保持完整性。
这也是显而易见的。修复此问题是为font-awesome类删除inline-block。 或者添加font-size：0;在你的包装类中。
.wrapper {font-size: 0}
答案 1 :(得分：1)
差距是因为[class ^ =“icon”] {display：inline-block; }。如果你要显示它，它的行为与p标签相同：block。
答案 2 :(得分：0)
罪魁祸首是[class^="icon"] { display: inline-block; }，虽然我不知道为什么。