なぜフォントか小さいフォントサイズを使用すると、驚くべきアイコンの上に奇妙な「余白」がありますか？

Question

私の目標は、font-awesomeアイコンをdivの横に並べることです。何らかの理由で、フォントのすばらしいアイコンが、小さなフォントサイズのアイコンの上に余白を持つように見えます。これは、ラッパーdivを展開します。たとえば、pタグでは同じことは起こりません。例は、ここで見つけることができます：

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

いくつかのポイント：

• マージンは、アイコン要素のいずれかの余裕はないですか。pseudoelement
• 前に、それは親要素のパディングではありません
• アイコンは、フォントサイズが15pxになるまで同じ量を親に展開します。

それに応じて、すばらしいアイコンが動作する原因は何ですか？アイコンとラッパーを設定して、アイコンの上に「余白」がないようにするにはどうすればよいですか？

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

Answer 1

インラインブロックは、ブラウザ内のアイコンが表示されているフォントサイズを表します。それはいくつか正しく、ゴーストスペースに入る小さなアイコンのためにこれを行います。これは、CSSの宣言に "インライン"があり、完全性を保つためにHTMLに改行スペースを追加しないと目立つようになります。

これは、font-awesomeクラスのインラインブロックを削除するための修正です。 またはfont-size：0を追加してください。あなたのラッパークラスで。

.wrapper {font-size: 0}

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

Answer 2

原因はわかりませんが、[class^="icon"] { display: inline-block; }です。

Answer 3

[class^= "icon"] {display：inline-block; }。 pタグと同じように動作します。