Question

以下代码

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width:200px;height:200px;padding:0px;margin:0px;">
    <div style="background-color:red;position:relative;display:block;text-decoration:none;padding:0px;margin:0px;">
    <img style="padding:0px;margin:0px;width:200px;height:200px;"  src="http://www.google.com/logos/2012/serbia12-hp.jpg">
</div>
</div>
</body>

底部有一个非常奇怪的红色边框，我无法弄清楚为什么会这么开心（包括Chrome和IE）。

enter image description here

如果我使用无效的文档类型（无感叹号）

<DOCTYPE html>

有效吗？

这是什么原因？为什么图像的宽度和高度与外框不完全相同（200px×200px）。我已经尝试了一切，但不知道为什么会发生这种情况？这是一个hmtl Bug还是我做错了什么？

旁注：这是一个复杂多变的HTML构造。上面的例子没有意义，但它说明了问题。如果你能解释为什么会这样，那就太好了。

非常感谢！

Answer 1

浏览器中的默认行间距不会均匀分为200.由于<img>默认显示为inline，因此它会考虑行间距。你看到了这个结果。

将<img>设置为display: block;可以解决您的问题。

Answer 2

这种情况发生的原因（我的猜测是它的规格）是图像与文本的基线对齐。如果你把一些带有下行器的文本（字母的底部字符串）放在一起，你会发现它完全适合......

http://jsfiddle.net/LvLPE/

一个简单的解决方法是告诉浏览器将图像视为具有display: block;的div。

Answer 3

看起来你有点white-space bug。两种解决方案：

删除img：
周围的空白区域
<div style="background-color:red;position:relative;display:block;text-decoration:none;padding:0px;margin:0px;"><img style="padding:0px;margin:0px;width:200px;height:200px;" src="http://www.google.com/logos/2012/serbia12-hp.jpg"></div>
或者您可以在font-size: 0;

div

img

此外，在display: block上声明div是多余的，您不需要那样做。

HTML：在严格模式下非常奇怪的间距，原因是什么？

3 个答案: