未在任何地方指定的标头保证金

Question

我有一个奇怪的问题。我有一个简单的网页，由于某些原因，<h1 />标记的margin-top和margin-bottom超过18个像素。我的* .css文件中没有任何内容指定此内容。 Firefox Firebug向我展示了应用的样式，但在任何地方都没有边距。

在图片中，标题文本所在的div（或应该在其中）具有限制。但由于边距，标题文本被推下来。

导致这种情况的原因是什么？ firefox / firebug中是否有任何地方可以显示我的风格来自哪里？它表示header标记继承自body样式，但仅限于此：

body
{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

有什么想法吗？提前谢谢。

Answer 1

默认情况下，标头通常具有边距。看看使用重置/规范化样式表。

重置或规范化样式表会将样式重置为所有浏览器的标准基线。重置和规范化之间的区别在于重置清晰的边距，填充等，其中规范化样式表应用合理的默认值。

这些链接应该是有用的：

• https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
• Reset Reloaded
• normalize.css

Answer 2

这是<h1>的默认样式。类似于<h1>的文本大小大于段落的事实。这只是默认值。它也可以被覆盖。

Answer 3

大多数浏览器都添加了一些默认margin和padding。

尝试重置margin，如此

body{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
    margin:0;    /*  ADD THIS  */
}

您也可以在h1

上重置它

Answer 4

所有浏览器都有一个适用于所有页面的默认CSS。

使用Yahoo Reset CSS之类的内容取消所有应用的样式。