爲什麼兩張圖片的底部填充比單張圖片的填充大？

我有一個基本的網頁，其中的目的是要包含一個或兩個圖像的框。盒子從左到右，隨時包裝。爲什麼兩張圖片的底部填充比單張圖片的填充大？

圖像和容器框之間的填充應該是5px四周。當單個圖像包含在框中時，填充正確，但在將第二個圖像添加到框時，填充會變大。添加第三個圖像不會進一步增加填充 - 唯一的區別在於「一個圖像」和「多個圖像」之間。

我不明白是什麼導致額外的填充，所以我不知道如何避免或抵消它。

任何見解？

這是我的網頁的源代碼，後面是在Linux Mint上運行的Chromium 25.0.1364.160和Firefox 20.0的渲染圖。

<html> 
<head> 
<style> 
body { background:#FFDDBB; } 
* { margin:0; padding:0; } 
.wrapper { margin:5px 0 0 5px; float:left; border:1px solid black; padding:5px; background:white; } 
</style> 
</head> 
<body> 
<div class="wrapper"> 
<img src="http://placehold.it/200x200"/> 
</div> 
<div class="wrapper"> 
<img src="http://placehold.it/200x200"/> 
<img src="http://placehold.it/200x200"/> 
</div> 
</body> 
</html>

screenshot of webpage

來源

2013-07-28 DreadPirateShawn

但事實並非如此。 http://jsfiddle.net/qTsFQ/至少，在我的嘗試中，我使用第一個圖像創建了相同（更大）的填充。 – GolezTrol

是否添加'img {vertical-align：bottom}'修復它？ –

@Kolink：是的（只是在你輸入你的評論時試過） - 儘管我仍然不明白爲什麼。我在這裏看到了這個建議 - http://stackoverflow.com/questions/8522047/why-is-this-container-div-taller-than-required-to-wrap-the-image-it-contains?rq=1 - 雖然這比較了字母下降的行爲。我想知道爲什麼第二張圖片會改變行爲，假設其他人可以重新表現行爲方面。 – DreadPirateShawn

摘要部分回答的，如通過上述評論達到由於Kolink：

IMG {垂直對齊：底部}是修復。
的微胖預計 - 見參考文獻問題White space at bottom of anchor tag（Icode4food）和Why does my image have space underneath?（Kolink）

開放問題依然存在：

單張圖像沒有微胖至今仍然無法解釋目前。如果你能澄清我最初的repro的特定方面，請隨意點贊。

來源

2013-07-28 07:52:13 DreadPirateShawn

試圖通過將display: inline-block;margin: 0; padding: 0;你的形象。

來源

2013-07-28 06:52:09

沒有骰子。「顯示」的變化似乎沒有影響，但「垂直對齊：底部」。根據上面的評論線索，如果可能的話，我仍然想知道爲什麼行爲會隨着第二張圖片而改變。 – DreadPirateShawn

你可以演示一個演示，然後我會試着回答你想要的 –

爲什麼兩張圖片的底部填充比單張圖片的填充大？

回答

相關問題