0

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

图像和容器框之间的填充应该是 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>

网页截图

4

2 回答 2

0

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

于 2013-07-28T06:52:09.603 回答
0

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

  1. img{vertical-align:bottom}是修复。
  2. 额外的填充是预期的——请参阅参考问题White space at bottom of anchor tag (Icode4food) 和为什么我的图像下面有空间？（科林克）

悬而未决的问题仍然存在：

  • 没有额外填充的单个图像现在仍然无法解释。如果您能澄清我原始复制的特定方面，请随时加入。
于 2013-07-28T07:52:13.493 回答