Question

我有一个基本网页，其目的是让包含一个或两个图像的框。这些盒子从左到右进行，在需要时进行包装。

图像和容器盒之间的填充应该是5px左右。当单个图像包含在框中时，填充是正确的，但是当将第二个图像添加到框中时，填充会变大。添加第三个图像不会进一步增加填充 - 唯一的区别是＆＃34;一个图像＆＃34;和＆＃34;不止一个图像＆＃34;。

我不明白导致额外填充的原因，所以我无法弄清楚如何避免或抵消它。

任何见解？

以下是我的网页的来源，后面是在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

Answer 1

尝试将display: inline-block;margin: 0; padding: 0;设置为您的图片。

Answer 2

部分答案的摘要，感谢Kolink通过以上评论达成：

img {vertical-align：bottom} 是修复。
预计额外填充 - 请参阅参考问题White space at bottom of anchor tag（Icode4food）和Why does my image have space underneath?（Kolink）

还有问题：

单个图片没有额外填充暂时无法解释。如果你能澄清我原来的复制品的特殊方面，请随意加入。

为什么两个图像的底部填充比单个图像更大？

2 个答案: