我的佈局的空白部分是什麼？

#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>

請點擊「運行代碼片斷」按鈕來查看結果。你可以在圖像的底部看到，有一個空白部分。這是從哪裏來的？

來源

2016-05-29 JasmineOT

[HTML，CSS - 怪異無形（http://stackoverflow.com/questions/1383048/html-css-weird-invisible-margin-below-pictures） – vaultah

[刪除圖片下方的空格\ [複製]]（http：// stackoverflow .com/q/7774814/2301450） – vaultah

[Image in div在圖像下面有額外的空間]（http://stackoverflow.com/q/5804256/2301450） – vaultah

它是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>

來源

2016-05-29 13:52:31 dippas

我的佈局的空白部分是什麼？

回答

相關問題