div底部的空间

时间:2014-11-18 02:22:23

标签: html css

我已经创建了以下演示来展示我的问题:

http://francisbaptiste.com/nov17/

每个div的宽度为33.33%。在div内是100%宽度的图像。我希望它是一个完美的图像网格,但div的高度总是略高于图像的高度。

不应该根据图像的高度来设置div的高度吗?那么为什么底部有那么一点空间呢?

2 个答案:

答案 0 :(得分:9)

差距来自图片标签后面的实际空白。您可以使用它来修复它:

.card img {
    display: block;
}

Fiddle

或者更糟糕的解决方案:

.card {
    font-size: 0;
}

Fiddle

答案 1 :(得分:1)

我认为问题是外部div的高度,你不能使用auto,因为浏览器可能对div及其内部内容有一些默认操作。相反,我指定高度的百分比并解决了问题

.card {
width: 33.333%;
height: 50%;
overflow: hidden;
float: left;
background: black;
color: white;
}

这对你有意义吗?