我把它的DTD是HTML4过渡页面并改为DOCTYPE <!DOCTYPE html>和额外的空间H1和DIV其下方出现之间。 我没有做任何其他更改的标记或CSS。
例如的jsfiddle： http://jsfiddle.net/ngordon/vSqkg/3/ 。
如果更改HTML5文档类型，以HTML4过渡，你可以看到额外的空间出现和消失，即使标记和CSS是完全一样的。
任何想法如何摆脱空间的？
Answer 1:
在HTML 4.01的doctype过渡导致浏览器几乎标准模式。 HTML5的DOCTYPE导致标准模式。
此Microsoft文章解释了区别： http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29 。
它说，对于准标准模式：
内联元素有助于线高度，当且仅当以下条件之一为真。
如果元素：
包含文本字符
具有非零边框宽度
具有非零保证金
具有非零填充
有一个背景图像
具有垂直对齐设置为基线以外的值
需要注意的是一个换行符不考虑这个定义的文本字符，除非它是一个行框的唯一内容。 在这种情况下，线箱高度保持最上面的内联框顶部和最下面的行内框底部上线，而不管指定的行的高度。
如果一个img元素是一个表格单元格的内容唯一的细胞系框的高度的线框的高度被调节到零。
最关键的是在你的情况下，这意味着包含该图像的行的高度的计算不包括strut ，一个假想的内联元件应当增加线路高度到的行高值h1元件。
此的jsfiddle示出了真实的span与元素 作为真正的文本内容站在为支柱，你可以看到布局既与HTML 4.01的doctype过渡和HTML5文档类型相同。
这的jsfiddle显示了同样的想法，只是这一次的支柱使用CSS，像这样制作：
h1:before {
content: '\A0';
}
在khurram的回答的情况下，他正在做什么是减少的行高度h1 ，因此，在标准模式下，支撑的高度要小于图像的高度。 这意味着线作为一个整体的高度是由图像的高度，而不是支柱的高度来确定。 图像的高度在两个标准，几乎标准模式同样如此反复，你看不到的模式之间呈现差异。
至于为什么设置的行高度h1相匹配的图像（25像素）的高度不工作，但它设置为12px的呢，那是因为支柱建立不仅是一个顶部和底部，同时也为基线行。 基线是一个小的底部上方，以允许文本伸，正常大小的文本这通常大约3px的。 默认情况下，图像坐在基线所以基线和底部之间的间隙被添加到图像的高度来建立线的高度。
这可以通过移动图像断基准，通过使用来解决img { vertical-align: top } ，其在此示出的jsfiddle 。 如果你用h1行高鼓捣在这里，你会看到，值大于25px的增加线之间的间距，但25像素的值以下不改变间距。
Answer 2:
已应用CSS复位http://meyerweb.com/eric/tools/css/reset/你的CSS你开始申请任何其他的CSS效果之前？
Answer 3:
你的bug涉及默认的行高度。
在HTML4过渡无视你的H1 WRT线高度的内容，产生一个25像素高的元素。 该HTML5被尊重H1标签，相当于29px的行高。
Answer 4:
只是给line-height:12px; 或者你想要什么。
一起来看看： 的jsfiddle 。 你的代码的修改。
Answer 5:
这就是为什么HTML5样板有一个CSS复位。
你也可以设置DIV的margin: 0; padding: 0; margin: 0; padding: 0; 但你要对每一个元素做，直到你打他们所有。 大约在这个线程迈尔的CSS复位的答案是正确的。
下面是解决方法的一个例子： http://jsfiddle.net/mikelegacy/vSqkg/5/
文章来源: HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove?
