修改

Question

当我将网站更改为

时

<!DOCTYPE HTML>

包含在DIV中的每个img元素都有一个3px的底部边距，即使该边距未在CSS中定义。换句话说，没有导致3px底部边距的样式属性。

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

现在让我们说haha.jpg是50x50，而.placeholder设置为display：table。奇怪的是，我观察中.placeholder的高度尺寸是50x53 ......

有没有人遇到过这种异常并修复过它？

这是JS FIDDLE

Answer 1

这个问题是由于图像表现得像文字字符（因此在“y”或“g”的悬挂部分下面留下一个空间），并使用{{1 CSS属性表示不需要这样的空间。几乎vertical-align的任何值都可以;我个人喜欢vertical-align。

middle

Answer 2

我经常通过酌情提供图像元素display:block或display:inline-block来解决此问题。

Answer 3

它解决了我的问题。

line-height: 0;

Answer 4

我相信设置

line-height: 1;

图像上的

也可以解决这个问题，特别是如果它本身就是一个块。

Answer 5

我不确定为什么会发生这种情况的确切解释，但请给出占位符div font-size：0px;

.placeholder {
    font-size: 0px;
}

Answer 6

将display: block应用于图像修复它，我有浮动div中的图像问题。

Answer 7

对我而言，它是

的组合

font-size: 0px;
line-height: 0;

在修理它的包装容器上。

Answer 8

不确定究竟是什么问题，但我尝试使用2个不同的选项首先在img标签上应用这个会起作用，第二个应用字体大小0 px;

Answer 9

在堆积divs时也会发生这种情况，只需添加float属性即可。例如：

<body>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
</body>

有问题的CSS：

.piledUpDiv{
    width:100%;
    display:inline-block;   
 }

解决方案：

.piledUpDiv{
    width:100%;
    display:inline-block;
    float:left; 
 }

Answer 10

也许是造成这种情况的白色空间问题。所以，这些方法可能很有用

img {
display: block;

} 或

img {
vertical-align: top/middle/...;

}

或

.placeholder {
font-size: 0;

}

Answer 11

在我的特殊情况下，上述解决方案均无效。

我用div包装了display: flex;。

我设法通过在包装div和所有图像中添加align-items: flex-start;和所有图像：display: block;。

在我明确告诉内容要对齐之前，它弄乱了版式。将其设置为可伸缩启动后，所有内容都会像超级按钮一样起作用。