为什么使用两个图片时底部填充比使用单个图片时更大?

6 浏览
0 Comments

为什么使用两个图片时底部填充比使用单个图片时更大?

我有一个基本的网页,其中的意图是包含一个或两个图像的方框。方框从左到右排列,需要时换行。

图像和容器方框之间的边距应该是四周都为5像素。当方框中包含单个图像时,边距是正确的,但是当向方框添加第二个图像时,边距会变大。添加第三个图像不会进一步增加边距 - 唯一的区别是“一个图像”和“多个图像”之间。

我不明白是什么原因导致了额外的边距,所以无法找出如何避免或抵消它。

有什么见解吗?

这是我的网页源代码,下面是在运行Linux Mint上的Chromium 25.0.1364.160和Firefox 20.0时呈现的截图。

0
0 Comments

问题出现的原因:

在使用两个图片时,底部填充较大的原因是因为默认情况下,图片的垂直对齐方式是基线对齐(baseline alignment)。当使用两个图片时,第一个图片的底部会被基线对齐,而第二个图片则会根据自身高度进行对齐,导致底部填充较大。

解决方法:

通过设置垂直对齐方式为底部对齐(vertical-align: bottom),可以解决底部填充较大的问题。此外,还可以尝试使用display: inline-block;来设置图片的显示方式,以及margin: 0;padding: 0;来设置图片的外边距和内边距。

以下是代码示例:

img {
  display: inline-block;
  vertical-align: bottom;
  margin: 0;
  padding: 0;
}

通过以上方法,可以解决使用两个图片时底部填充较大的问题。

0
0 Comments

原因:在两个图像的情况下,底部填充比一个图像的情况下更大的原因是因为默认情况下,图像在垂直方向上默认对齐到基线,而不是底部。这导致了额外的填充。

解决方法:将图像的垂直对齐方式设置为底部,可以通过CSS样式表中的img{vertical-align:bottom}来实现。

摘要部分的回答总结如下:

  1. img{vertical-align:bottom}是解决方法。
  2. 预期会有额外的填充,参考问题:White space at bottom of anchor tag (Icode4food)和Why does my image have space underneath? (Kolink)

开放问题仍然存在:

  • 单个图像没有额外填充的情况下仍然没有解释。如果您能澄清原始问题中这个特定方面,请随时提供意见。
0