爲什麼父母身高不一樣是內在形象的高度？

我一直對CSS的一段時間，但我很困惑，爲什麼父高度是不一樣的內部圖像高度，給出下面的代碼。爲什麼父母身高不一樣是內在形象的高度？

<div style="width:200px"> 
    <img style="max-width:100%;" src="http://localhost:8888/example/06f1e47fbdb03e48203ebfba/66932afa697bdbc76a1a291e/thumb_d90ab4a531969620e2c2a160.jpg"> 
</div>

我期待父div會相應地擴展不同的圖像。事實是，內部圖像是200 * 200，外部div是200 * 206，我不知道多餘的6像素來自哪裏。 內部圖像的外部div或邊距有填充。有人能解釋爲什麼發生這種情況？

來源

2015-07-05 Kesong Xie

在瀏覽器中單擊鼠標右鍵，檢查元素，查找元素，看到的是應用了哪些CSS。 – L4zl0w

@ L4zl0w我已經試過了，沒有出現。 –

是否this解決這個問題的嗎？如果沒有，您使用的瀏覽器和操作系統是什麼？

我以前碰到這個。問題是，圖像默認爲display: inline-block，這會導致它們像文本一樣行爲（例如，在文本基線之後）。如果我們不希望發生這種情況，我們可以將顯示更改爲display: block。

來源

2015-07-05 22:59:42

完美！它修復了。同樣的，當你有幾個內嵌塊div時，他們通常會在一個和另一個之間獲得一些意想不到的餘量 –

使用display: block;

div { 
 
    width:200px 
 
} 
 

 
img { 
 
    max-width:100%; 
 
    display: block; 
 
}

<div> 
 
    <img src="http://cadizinc.com/wp-content/uploads/2011/11/water_07-610x370.jpg"> 
 
</div>

來源

2015-07-05 23:03:19 TechWisdom

有人能解釋爲什麼出現這種情況？

因爲圖像是一個替換內聯元件，因此它是每默認上的在同一行電位文本內容基線對齊。

使其成爲block如已經在另一個答覆中提到，或指定vertical-align:bottom它改變了。

來源

2015-07-05 23:20:02 CBroe

爲什麼父母身高不一樣是內在形象的高度？

回答

相關問題