Question

这让我发疯了，所以我想我会问是否有人可以解释为什么当图像被放置在具有背景颜色的div / cell内时，图像下面会添加窄底边距。这是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>Problem</title>
</head>

<style type="text/css">
.color_table {
    background-color: #8c0067;
    width: 200px;
    align: center;
}
.color_div {
    background-color: #8c0067;
    width: 200px;
}
</style>

<body>

<table>
<tr>
<td class="color_table">
<img src="http://www.gravatar.com/avatar/4253171452772bb013319698f2ddbfc4?s=128&d=identicon&r=PG">
</td>
</tr>
</table>

<hr>

<div class="color_div">
<img src="http://www.gravatar.com/avatar/4253171452772bb013319698f2ddbfc4?s=128&d=identicon&r=PG">
</div>

</body>
</html>

如果我删除doctype行div和td就像我预期的那样工作，即图像下没有出现边距。

Answer 1

<强>解决方案

/* place in your css or between <style> */
img {
   vertical-align: top;   
}

为什么会这样？

将文字放在图像旁边后，您会看到问题所在。由于字母y g j，线条间距越来越大。这就是为什么你在图像上有空间。

在此示例中，您可以看到我的意思

http://jsfiddle.net/UrxmN/2/

Answer 2

我遇到了一个页面在页面底部显示填充的问题

img { display:block ; }

在css文件中写上面解决了我的问题。希望这会有助于其他人

Doctype导致底部边距显示在图像下方

2 个答案: