img要素でline-heightが機能しないのはなぜですか？

Question

MDNは、line-heightがインライン要素に作用すると言います。画像はインライン要素です。では、なぜline-heightがimg要素で動作しないのですか？ Here is the jsfiddleで、行の高さがイメージを中央に配置しません。

Answer 1

あなたはへのリンクページにline-heightを使用する必要があると言う：、ボタンまたは他の入力要素、ラインとして置き換えインライン要素で

-heightは効果がありません。

img要素がインライン要素を交換しているので、line-heightは彼らには影響しません。

イメージの周りの線の高さを設定するには、余分な要素が必要です。

span { 
 
    line-height: 200px; 
 
} 
 
div { 
 
    outline: solid black 1px; 
 
}

<div> 
 
    Hello <span> <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt=""> </span> World 
 
</div> 
 

 
<div> 
 
    Hello 
 
    <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt="">World 
 
</div>

Answer 2

あなたはdiv

.container { 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 1px dotted black; 
 
    line-height: 400px; 
 
}

<div class="container"> 
 
    <img src="http://findicons.com/files/icons/2229/social_media_mini/48/google.png" alt=""> 
 
</div>