logo标签列表

CSS Margin: 0未被设置为0

htmlcssmargin
42
我是一个新手网页设计师。我使用CSS和HTML创建了下面的网页布局。问题是，即使我将边距设置为0，上边距仍未设置为0，留下了一些空间。如何清除这个白色空间？ 问题的屏幕截图

There's a space in top

<style type="text/css">
body{   
    margin:0 auto; 
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}
</style>

HTML

<body>
    <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>
</body>

这是整个文件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Shop</title>
<style type="text/css">
html, body, #header {
    margin: 0 !important;
    padding: 0 !important;
}
body{   
    margin:0;    padding: 0;
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}

body {
   margin: 0;
   padding: 0;
}
</style>
</head>

<body>
  <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>

</body>
</html>
我希望这个链接(https://dev59.com/AGMl5IYBdhLWcg3wAC6h#18772399)能够有效地帮助你。 - Deva
实际上这是边距折叠，当两个边距相遇时，边距将取决于较大的边距。您可以参考此网站MDN - 掌握边距折叠。 - Brady Huang
12个回答
53

尝试使用try...catch语句来捕获并处理可能引发错误的代码。

body {
   margin: 0;
   padding: 0;
}

jsFiddle。

由于不同浏览器使用的默认样式表不同，因此一些人建议使用重置样式表，例如Eric Meyer的Reset Reloaded。

不，它没有起作用。但是当我在“header”和“header_content”标签之间插入一些没有任何标记的内容时，它就可以工作了。 - Nipuna
2
@Nipuna，这对我有效。尝试一下我提供的CSS重置，可能会有更多的边距和/或填充在起作用。 - alex
31

你需要将实际页面设置为margin:0和padding: 0，而不仅仅是body。

在你的css样式表中使用以下代码。

*, html {
    margin:0;
    padding:0;  
}

这将把整个页面设置为0，从而实现全新的干净起点，没有边距或填充。

  • 这个符号到底是干什么用的？
 - etusm
4
“that will set the whole page to 0” 的意思是“这将把整个页面设为0”。你说得对，它会把整个页面都设为0。使用 * 将使页面上的每个元素都具有0的边距和填充，这是不希望出现的。 - krummens
对我有用。谢谢。 - Ashok
3
为什么要用 * 和 html？使用 * 不就已经匹配了 html 元素吗？ - alex
@alex 是的，它会。 - Mr Lister
:root选择器可能是您想要的，它与html相同，但由于其特异性更高，并且通常在将项目设置为其上方时已经将:root设置为某个值，因此有些问题似乎无法解决。 选择器选择其前面的所有元素（在本例中，文档中的所有内容），因此您不会通常在根级别使用它，除非您正在使用类似“所有”之类的属性来强制默认值，自动值，初始值等。我会小心使用，因为如果过度依赖它，它可能会回来咬你。您最终将拥有带有!important的CSS。 - osirisgothra
6

您应该在以下两种情况下使用：

  1. 在body上添加padding != 0
  2. 在#header上添加margin != 0

尝试一下：

html, #header {
    margin: 0 !important;
    padding: 0 !important;
}
< p > Margin 是指盒子外部的“空白区域”，Padding 是指盒子内部的“空白区域”（位于边框和内容之间）。 !important 可以防止后续规则覆盖该属性。

我发布了整个HTML文档。对你来说可以正常工作吗？ - Nipuna
不行，不起作用...也不知道为什么。这真让人沮丧！所有的开发工具都显示边距/填充为0。 - Yannick Loiseau
1
你应该非常节制地使用!important，如果有必要的话。 - alex
如果这是你的CSS，而不是一些其他不可修改的外部CSS，你应该避免使用!important。我只在覆盖无法修改的其他人的代码时使用它。即使如此，也只有在没有其他可能的情况下才使用，但通常还有其他方法，除非你正在处理不希望其代码被覆盖的CSS。 - osirisgothra
3
h1 {
margin-top:0;
padding-top: 0;}

这只是对于 h1 标签的一种误解。你需要将 h1 标签的 margin-top 和 padding-top 值设为 0（零）。

2

尝试

html, body{
  margin:0 !important;
  padding:0 !important;
}
没有，它也没有起作用。但是重置表格起作用了。我在想问题出在哪里。 - Nipuna
2
请将以下与编程相关的内容从英文翻译成中文。只返回翻译后的文本：请看下面的回答...我花了太长时间来写它，你已经接受了 ;) - Yannick Loiseau
2
@nipuna 你的HTML中有任何表格吗？我想知道重置文件中是什么解决了你的问题。除了上面提供的内容，你是否还有其他HTML加载？ - Hussein
2
@nipuna：没问题...重置样式表是一个好习惯。不过我很好奇它到底解决了什么问题... - Yannick Loiseau
避免使用!important --> https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/ - Outside_Box
显示剩余3条评论
1

只需在主CSS的开头使用此代码。

       * {
           margin: 0;
           padding: 0;
         }

上述代码在几乎所有浏览器中都有效。
1
似乎没有人真正阅读你的问题并查看你的源代码。这就是你一直在等待的答案：
#header_content p {
    margin-top: 0;
}

jsFiddle

的英译为：

{{链接1：jsFiddle}}

你也可以通过将<p>更改为<div>或<span>来修复它 http://jsfiddle.net/80oc6vzy/1/ - Zectbumo
1
阅读后并解决了相同的问题，我认为这与标题有关（h1肯定是，其他标题没有尝试过），同时浏览器样式使用巧妙规则添加外边距和内边距，很难找到并覆盖。
我采用了一种技术来正确应用box-sizing属性到外边距和内边距。原始文章位于CSS-Tricks。
html {
margin: 0;
padding: 0;
}
*, *:before, *:after {
margin: inherit;
padding: inherit;
}

到目前为止，这确实是一个不使用复杂重置的技巧，使得应用设计对我来说更加容易。希望它能有所帮助。

0
我今天刚开始学习CSS，遇到了同样的问题。我认为您不需要重置所有HTML标签的样式，而是需要重置您使用的顶部HTML的默认上边距，即段落标签。我知道这是一个老问题，但也许我的下面的解决方案可以帮助某些人。

请尝试这个：

body{   
    margin: 0; 
    background:#F0F0F0;
}
p{
    margin: 0;
}
0

这很简单。只需将此添加到标签中即可 -

body{
margin:0;
padding:0;
overflow:hidden;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接