123

当我将我的网站更改为

<!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

11 回答

21
这个问题是由于图像的行为类似于文本字符（因此在"y"或"g"的悬挂部分下面留下一个空间），并通过使用 vertical-align CSS属性来表示没有这样的空格来解决需要 . 几乎任何 vertical-align 的值都可以;我个人非常喜欢 middle .
```
img {
    vertical-align: middle;
}
```
jsFiddle：http://jsfiddle.net/fRpK6/1/
回复于 2024-04-24T07:22:31+08:00
1

我经常通过适当地给出图像元素 display:block 或 display:inline-block 来解决这个问题 .

回复于 2024-04-24T07:22:31+08:00
0
它解决了我的问题 .
```
line-height: 0;
```
回复于 2024-04-24T07:22:31+08:00
3
我相信设定
```
line-height: 1;
```
在图像上也将解决这个问题，特别是如果它本身在一个块中 .
回复于 2024-04-24T07:22:31+08:00
1
我不确定它为什么会发生的确切解释，但给你的占位符div font-size：0px;
```
.placeholder {
    font-size: 0px;
}
```
回复于 2024-04-24T07:22:31+08:00
6

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

回复于 2024-04-24T07:22:31+08:00
0
对我来说，这是一个组合
```
font-size: 0px;
line-height: 0;
```
在固定它的包装容器上 .
回复于 2024-04-24T07:22:31+08:00
1

不知道确切的问题是什么，但我尝试了2个不同的选项首先在img标签上应用这将工作，第二个应用字体大小0 px;

http://jsfiddle.net/fRpK6/3/

回复于 2024-04-24T07:22:31+08:00

它也会发生堆积 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; 
 }

回复于 2024-04-24T07:22:31+08:00