Warum Font Awesome-Symbole haben seltsame "Rand" oben bei der Verwendung kleiner Schriftgrößen?

Question

Mein Ziel ist es, font-awesome icon mit div daneben auszurichten. Aus irgendeinem Grund scheinen die font-awesome Icons einen kleinen Vorsprung über den Symbolen auf kleinen Schriftgrößen zu haben, was das Wrapper div erweitert. Dasselbe gilt nicht für beispielsweise das p-Tag. Beispiel finden Sie hier:

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

Wenige Punkte:

• Die Marge ist nicht entweder Rand des Symbols Element oder: vor Pseudoelement
• Es ist nicht Polsterung des Elternelements
• Das Symbol erweitert das übergeordnete Element um den gleichen Betrag, bis die Schriftgröße 15px

ist

Was bewirkt, dass sich die font-awesome Icons entsprechend verhalten? Wie kann ich das Symbol und den Wrapper so einstellen, dass das Icon nicht den oberen "Rand" hat?

// 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 füllt das aus, was der Browser glaubt, ist die Schriftgröße mit Ihrem Symbol darin. Es tut dies richtig für einige und für kleinere Symbole tritt es Geisterraum ein. Dies macht sich auch bemerkbar, wenn Sie in Ihrem HTML-Code keine Leerzeichen hinzufügen, weil sie in der css-Deklaration "inline" enthalten und versuchen, dies integer zu halten.

Fix für das Entfernen von Inline-Block für die Klasse font-awesome. Oder fügen Sie font-size hinzu: 0; in Ihrer Wrapper-Klasse.

.wrapper {font-size: 0}

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

Answer 2

Der Täter ist [class^="icon"] { display: inline-block; }, obwohl ich weiß nicht, warum.

Answer 3

Die Lücke ist wegen [class^= "icon"] {display: inline-block; }. Es verhält sich genauso wie das p-Tag, wenn Sie es zur Anzeige bringen: block.