如何去除这些图片之间的间隙？

34 浏览
0 Comments

如何去除这些图片之间的间隙？

为什么在以下代码中，div的高度比img的高度要大？图片下方有一段空白，但似乎不是由于padding/margin引起的。

图片下方的间隙或额外空间是什么？

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

图片下方有间隙或白色空白

0

3 答案

0 Comments

在这篇博文中，某些情况下了另一种解决方法，即将图像的样式设置为style="display: block;"。感谢这个方法，它也解决了flash视频下方的空白问题（在嵌入/对象标签中添加display:block）。

或者，如果仍希望图像按照正常情况下的内联方式显示，可以使用inline-block。

然而，inline-block似乎不起作用。

然而，这样做会破坏text-align:center的效果。

0
0 Comments

问题：如何删除这些图片之间的间隙？

原因：默认情况下，图片标签（）在垂直对齐属性（vertical-align）设置为baseline时，会在文本的基线上对齐，导致底部出现间隙。这是因为浏览器将图片视为替换元素（replaced element），并根据默认行为计算其display属性为inline，但它们具有类似于inline-block元素的特殊行为。

解决方法：可以通过以下方法之一来删除图片下方的间隙：

1. 将图片的垂直对齐属性（vertical-align）设置为bottom、top或middle。

2. 将图片的display属性设置为block。

以下是示例代码和演示效果：

#vAlign img {
  vertical-align: bottom;
}
#block img {
  display: block;
}
div {
  border: 1px solid red;
  width: 100px;
}
img {
  width: 100px;
}


No fix:



  



With vertical-align: bottom; on image:



  



With display: block; on image:

运行代码示例

通过更改垂直对齐属性或display属性，可以删除图片下方的间隙。

需要注意的是，某些浏览器可能不会遵守font-size: 0的设置，而是根据用户设置将字体大小设置为最小值。因此，将font-size设置为0并不是一个好的解决方法。

以上是关于如何删除图片之间间隙的原因和解决方法的说明。

0
0 Comments

问题的出现原因是默认情况下，图像以行内方式呈现，与字母a、b、c和d位于同一行上。图像下方有空间用于字母g、j、p和q等具有下行部分的字母的显示。解决方法有两种：一种是调整图像的垂直对齐方式，将其定位在其他位置（例如中间）；另一种是将显示方式更改为非行内显示。具体的CSS代码如下：

div {
  border: solid black 1px;
  margin-bottom: 10px;
}
#align-middle img {
  vertical-align: middle;
}
#align-base img {
  vertical-align: bottom;
}
#display img {
  display: block;
}

在默认情况下，图像以行内方式呈现，代码如下：


  
Default

  The quick brown fox jumps over the lazy dog

如果将图像的`vertical-align`属性设置为`middle`，可以将图像垂直居中，代码如下：


  
vertical-align: middle

  The quick brown fox jumps over the lazy dog

如果将图像的`vertical-align`属性设置为`bottom`，可以将图像底部与行对齐，代码如下：


  
vertical-align: bottom

  The quick brown fox jumps over the lazy dog

如果将图像的`display`属性设置为`block`，可以使图像显示为块级元素，代码如下：


  
display: block

  The quick brown fox jumps over the lazy dog

需要注意的是，如果使用`vertical-align: bottom`或`middle`，如果图像很小（小于行高），可能会出现神秘的空白空间出现在图像上方。这取决于字体的具体情况。

0