gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 18:47:31 25 4
gpt4 key购买 nike

这让我发疯了,所以我想我会问是否有人可以解释为什么当图像放置在具有背景颜色的 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>

如果我删除文档类型行 div 和 td 会按我预期的那样工作,即图像下方不会出现边距。

最佳答案

解决方案

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

这是为什么?

一旦您将文本放在图像旁边,您就会发现问题所在。由于字母 y g j,线条的间距越来越大。这就是为什么你在图像上有空间。

在这个例子中你明白我的意思

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

关于html - Doctype 导致底部边距显示在图像下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15951715/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com