CSS保证金：0未设置为0

问题描述

| 我是网页设计的新手。我使用CSS和HTML创建了我的网页布局，如下所示。问题是即使我将边距设置为0，上边距也不设置为0并留有一些空间。如何清除空白？问题的屏幕截图样式表

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

解决方法

尝试...

body {
   margin: 0;
   padding: 0;
}

jsFiddle。由于浏览器使用不同的默认样式表，因此有人建议使用重置样式表，例如Eric Meyer的“重置重新加载”。 , 您需要将实际页面设置为margin：0并将padding：0设置为实际的html，而不仅仅是正文。在CSS样式表中使用它。

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

会将整个页面设置为0，这样就可以重新创建一个全新的，没有边距或填充的页面。 , 您应该（或同时）拥有：身体上的填充！= 0 #header上的保证金！= 0 尝试

html,#header {
    margin: 0 !important;
    padding: 0 !important;
}

margin是框外的\“空格\”，padding是框内（边框和内容之间）的\“空格\”。 !important防止后一规则覆盖财产。 , 尝试

html,body{
  margin:0 !important;
  padding:0 !important;
}

h1 {
margin-top:0;
padding-top: 0;}

与h1标签只是个误会。您必须将h1标签margin-top和padding-top设置为0（零）。 , 似乎没有人真正阅读您的问题并查看您的源代码。这是你们一直在等待的答案：

#header_content p {
    margin-top: 0;
}

jsFiddle , 在阅读完本文并解决了相同的问题后，我同意它与标题（肯定是h1，没有与其他语言玩过）有关，也与浏览器样式有关，这些边距和填充带有难以查找和替代的聪明规则。我已经采用了一种技术来将box-sizing属性正确地应用于边距和填充。框大小的原始文章位于CSS-Tricks：

html {
margin: 0;
padding: 0;
}
*,*:before,*:after {
margin: inherit;
padding: inherit;
}

到目前为止，这是不使用复杂的重置的诀窍，无论如何我都会更轻松地应用设计。希望能帮助到你。 , 将此代码添加到主要CSS的开头。

*,html,body{
  margin:0 !important;
  padding:0 !important;
  box-sizing: border-box !important;;
}

保证金设置设置设置