Question

我使用HTML div标签创建了一个简单的布局。我想在页面顶部没有边距（意思是没有空格）。我能够在Safari中实现这一点，但由于某些原因，相同的HTML代码并没有在Firefox中削减它。这是我的HTML代码的jsfiddle：http://jsfiddle.net/WhaGH/

您无法在jsfiddle中看到它，但如果您将代码复制并粘贴到HTML文档中然后使用Firefox打开它，则页面顶部的高度约为21px。如果您在Safari中打开相同的HTML文件，则不会出现此上边距。我在其他地方读到不同的浏览器使用不同数量的默认边距和填充“html”和“body”标签，因此我在“head”中包含了一些CSS，将这些标签的边距和填充设置为0.再次，这适用于Safari但不适用于Firefox（或者更确切地说，它适用于左边距，但不适用于Firefox中的上边距）。有谁知道为什么？

Answer 1

您已完成仅对body和html重置默认值，也为其他元素执行此操作。您可能会考虑将来使用CSS重置，看看HTML5 Boilerplate

http://html5boilerplate.com/html5boilerplate-site/built/en_US/docs/css/

Answer 2

<style type="text/css">
    body { margin: 0; padding: 0; }
    h1 { margin: 0; }
</style>

Answer 3

默认情况下，Firefox使用margin-top：21.4333px作为标记，并将div＃header添加到缩进中。

对块的子节点使用padding-top来防止这种情况。

h1 { margin-top: 0px; }

解决此问题。

Answer 4

你没有清除你的标题（添加一个属性溢出：隐藏;）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
}
</style>
</head>
<body style="width: 800px;">


<div id="header" style="width:800px; height:100px; background-color: blue; border-bottom: solid black 1px;overflow:hidden;">
<h1>This is the Header.</h1>
</div>
<div id="leftcolumn" style="width:199px;  height: 500px; background-color: red; float:left; border-right: solid black 1px;">
<p>This is the left column.</p>
</div>
<div id="content" style="width:400px; height: 500px; background-color:gray; float:left;">
<p>This is where the content goes.</p>
</div>
<div id="rightcolumn" style="width:199px; height: 500px; background-color: green; float: left; border-left: solid black 1px;">
<p>This is the right column.</p>
</div>


</body>
</html>

在Safari中可以移除上边距，但不能移除Firefox

4 个答案: