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

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

html css firefox safari

Html 可在Safari中移除上边距，但不能在Firefox中移除,html,css,firefox,safari,Html,Css,Firefox,Safari,我使用HTMLdiv标记创建了一个简单的布局。我想有没有空白（意思是没有空白）在我的页面顶部。我可以在Safari中实现这一点，但由于某些原因，相同的HTML代码无法在Firefox中实现。下面是我的HTML代码的一部分：在JSFIDLE中看不到它，但是如果您将代码复制并粘贴到HTML文档中，然后使用Firefox打开它，页面顶部会有大约21px的高度。如果在Safari中打开相同的HTML文件，则不会显示此上边距。我在其他地方读到，不同的浏览器使用不同数量的默认边距和填充“html”和“bo

我使用HTMLdiv标记创建了一个简单的布局。我想有没有空白（意思是没有空白）在我的页面顶部。我可以在Safari中实现这一点，但由于某些原因，相同的HTML代码无法在Firefox中实现。下面是我的HTML代码的一部分：

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

您只对body和html重置了默认值，对其他元素也重置了默认值。您可能会考虑在将来使用CSS重置，看看HTML5样板


正文{margin:0；padding:0；}
h1{边距：0；}


正文{margin:0；padding:0；}
h1{边距：0；}

默认情况下，Firefox使用边距top:21.4333px作为标记，而to div#头添加到缩进中

为防止这种情况，请使用块的子对象顶部填充

h1 { margin-top: 0px; }

修复此问题。

默认情况下，Firefox使用边距top:21.4333px作为标记，并且to div#头添加到缩进中

为防止这种情况，请使用块的子对象顶部填充

h1 { margin-top: 0px; }

修复此问题。

您没有清除标题（添加一个属性溢出：隐藏；）


html，正文{
保证金：0；
填充：0；
}
这是标题。
这是左列
这就是内容所在
这是右栏

您没有清除标题（添加一个属性溢出：隐藏；）


html，正文{
保证金：0；
填充：0；
}
这是标题。
这是左列
这就是内容所在
这是右栏

可能是执行此操作的

h1

，也可能是

div

。试着利用这些元素的边距。。您还应该使用Firebug，以便在查看页面时可以检查浏览器中的边距等。“在JSFIDLE中看不到”：这是因为您在左侧选中了“规范化CSS”。它已经实现了你想要实现的功能，以及许多其他在真实网站中不常用的“重置”功能。2/隐藏了一些CSS错误，并“悄悄地”执行。可能是

h1

正在执行此操作，也可能是

div

。试着利用这些元素的边距。。您还应该使用Firebug，以便在查看页面时可以检查浏览器中的边距等。“在JSFIDLE中看不到”：这是因为您在左侧选中了“规范化CSS”。它已经完成了您想要实现的功能，以及许多其他在真实网站中不经常需要的“重置”功能2/隐藏了一些CSS错误，并且它是“静默”完成的。这样就去掉了div元素的边距，而不是header（h1）元素的边距。我不完全清楚溢出是如何工作的；也许在div和h1元素中添加overflow:hidden会起作用？无论是哪种方式，向h1添加margin top:0px似乎也解决了问题，并使所有内容更加简洁。如果你读得更多，它将折叠margin，这将去掉div元素的margin，而不是header（h1）元素的margin。我不完全清楚溢出是如何工作的；也许在div和h1元素中添加overflow:hidden会起作用？无论是哪种方式，在h1中添加margin top:0px似乎也解决了问题，并使所有内容更加简洁。如果您阅读更多内容，它将崩溃margin谢谢您的帮助！你给了我和马克·诺兰基本相同的答案，但我选择了他作为“公认的答案”，因为他除了代码之外还给了我一些解释。谢谢你的帮助！你给了我和马克·诺兰基本相同的答案，但我选择了他的答案作为“接受答案”，因为他除了代码之外还给了我一些解释。谢谢你的帮助和链接！我想我所需要做的就是重置h1的边距上限值。谢谢你的帮助和链接！我想我所需要做的就是重置h1的边距上限值。

<!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>