私のレイアウトの空白部分は何ですか？

Question

#container { 
 
    width: 250px; 
 
    margin: 0 auto; 
 
} 
 

 
.group { 
 
    border: 1px solid grey; 
 
    margin-bottom: 20px; 
 
} 
 

 
.group p { 
 
    text-align: center; 
 
    font-family: Helvetica sans-serif; 
 
    font-size: 25px; 
 
    color: #2e3d49; 
 
} 
 

 
.group img{ 
 
    width: 100%; 
 
}

<div id="container"> 
 
    <div class="group"> 
 
    <p>Hello World</p> 
 
    <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg"> 
 
    </div> 
 
</div>

結果を参照するには、 "ファイル名を指定して実行コードスニペット" ボタンをクリックしてください。画像の下部に空白部分があります。これはどこから来たのですか？

Answer 1

それはimgはインライン要素であるので、設定はdisplay:blockようであるか、それがデフォルトvertical-align:baselineであるので、あなたはvertical-align:bottom

#container { 
 
    width: 250px; 
 
    margin: 0 auto; 
 
} 
 
.group { 
 
    border: 1px solid grey; 
 
    margin-bottom: 20px; 
 
} 
 
.group p { 
 
    text-align: center; 
 
    font-family: Helvetica sans-serif; 
 
    font-size: 25px; 
 
    color: #2e3d49; 
 
} 
 
.group img { 
 
    width: 100%; 
 
    display: block; 
 
    /* vertical-align: bottom - would work as well */ 
 
}

<div id="container"> 
 
    <div class="group"> 
 
    <p>Hello World</p> 
 
    <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg"> 
 
    </div> 
 
</div>