为什么 Font Awesome 图标在使用小字体时顶部有奇怪的 "margin"？
Why Font Awesome icons have weird "margin" on top when using small font-sizes?
我的目标是将字体超棒的图标与其旁边的 div 对齐。出于某种原因，超棒的字体图标似乎在小字体的图标顶部有一些边距，这会扩展包装 div。例如，p 标签不会发生同样的情况。示例可以在这里找到：
https://jsfiddle.net/jaakkokarhu/Luw8dsa8/2/
几点：
- 边距既不是图标元素的边距也不是 :before 伪元素
- 不是父元素的padding
- 图标将父级扩展相同的量，直到字体大小为 15px
是什么导致字体超棒的图标相应地表现出来？如何设置图标和包装器，使图标不在顶部 "margin"?
// This text is just for removing the ridiculous "links to JS fiddle needs to be accompanied by code" warning. Ignore this.
罪魁祸首是[class^="icon"] { display: inline-block; }，虽然我不知道为什么。
差距是因为[class^="icon"] { display: inline-block; }.如果你到达 display:block.
，它的行为将与 p 标签相同
内联块填充浏览器认为是字体大小的内容，其中包含您的图标。它对某些图标正确执行此操作，而对于较小的图标，它会进入 ghost space。如果您在 HTML 中添加 none breaking spaces，这也很明显，因为它们在 css 声明中有 "inline" 并且它试图保持完整性.
解决此问题的方法是为超棒的字体移除内联块 class。
或者添加 font-size: 0;在你的包装器中 class.
.wrapper {font-size: 0}
我的目标是将字体超棒的图标与其旁边的 div 对齐。出于某种原因，超棒的字体图标似乎在小字体的图标顶部有一些边距，这会扩展包装 div。例如，p 标签不会发生同样的情况。示例可以在这里找到：
https://jsfiddle.net/jaakkokarhu/Luw8dsa8/2/
几点：
- 边距既不是图标元素的边距也不是 :before 伪元素
- 不是父元素的padding
- 图标将父级扩展相同的量，直到字体大小为 15px
是什么导致字体超棒的图标相应地表现出来？如何设置图标和包装器，使图标不在顶部 "margin"?
// This text is just for removing the ridiculous "links to JS fiddle needs to be accompanied by code" warning. Ignore this.
罪魁祸首是[class^="icon"] { display: inline-block; }，虽然我不知道为什么。
差距是因为[class^="icon"] { display: inline-block; }.如果你到达 display:block.
，它的行为将与 p 标签相同内联块填充浏览器认为是字体大小的内容，其中包含您的图标。它对某些图标正确执行此操作，而对于较小的图标，它会进入 ghost space。如果您在 HTML 中添加 none breaking spaces，这也很明显，因为它们在 css 声明中有 "inline" 并且它试图保持完整性.
解决此问题的方法是为超棒的字体移除内联块 class。 或者添加 font-size: 0;在你的包装器中 class.
.wrapper {font-size: 0}