文档类型导致底部边距显示在图像下

这使我发疯，所以我想我会问是否有人可以解释为什么当图像放置在具有背景的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线股利和TD工作，因为我所期望的，即图像在任何保证金出现。

来源

2013-04-11 harinezumi

请先阅读这篇文章：http://stackoverflow.com/questions/414891/whats-up-doctype – Liam 2013-04-11 14:44:45

btw，'align：center;'不再有效。 – dezman 2013-04-11 14:44:51

可能有一些用户代理（浏览器）样式正在应用到您需要覆盖的'tr'或'table'，请检查检查元素。 – dezman 2013-04-11 14:46:24

解决方案

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

这是为什么？

一旦你把文字放在图片旁边，你会看到问题。由于y g j，线条间距越来越大。这就是为什么你有图像上的空间。

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

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

来源

2013-04-11 14:51:39

完美！这解决了它。我没有做过很多CSS，我也从来没有想过，那些空间不在那里。 – harinezumi 2013-04-11 16:27:22

我这里页的显示页面

img { display:block ; }

在CSS文件上面写着解决了底部填充的问题我问题。希望这会帮助其他人

来源

2013-08-12 12:01:24 Dashrath

文档类型导致底部边距显示在图像下

回答

相关问题