Question

我是CSS的新手，所以请不要对我苛刻。我试图将黄色背景DIV放在“Header”DIV正下方，但出于某种原因，它似乎在前后放置了一个填充，我真的不明白为什么。如果我删除列表，问题就会消失。

这是HTML代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<link rel = "stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="headerDiv">
    <p>Header</p>
</div>
<div id="listDiv">
    <ul>
<li>Menu item 1</li> 
      <li>Menu item 1</li> 
      <li>Menu item 1</li> 
      <li>Menu item 1</li> 
    </ul>
</div>
<div id="mainviewDiv">
Main View
</div>
<div id="footerDiv">
Footer
</div>

</body>

这就是CSS：

@charset "utf-8";
/* CSS Document */

div#headerDiv { background-color:#F00;
         height:100px;
         position:relative;
         }

div#listDiv {background-color:#FF0;
        }

div#listDiv ul {list-style-type:none;}

div#listDiv li { display:inline;}

div#mainviewDiv {background-color:#060;}

div#footerDiv {background-color:#999;}

enter image description here

Answer 1

将您的#listDiv和#headerDiv设置为margin:0px;

Answer 2

我不知道您是否尝试过此操作，但将其添加到CSS文件的顶部可能会对您有所帮助：

*{
    margin:0;
    padding:0;
}

但是当您发布网站时，请使用Eric Myers CSS reset

和Maxime Morin说的一样，你可能想看看http://nicolasgallagher.com/about-normalize-css/

Answer 3

由于collapsing margins，问题可能是ul元素的上边距。

还要确保div没有边距和填充（它们可能没有，因为div默认没有边距。

人们经常使用CSS reset like this删除所有元素上的所有边距和填充。之后，您可以在需要的地方添加特定样式。一旦你开始“真正的”造型，你应该考虑使用它。

Answer 4

在Chrome中呈现良好状态告诉我你可能正在使用IE浏览器。您可以通过使用CSS重置http://meyerweb.com/eric/tools/css/reset/来解决此类问题，它将所有CSS元素设置为0，以便所有浏览器从同一点开始，覆盖其内置的默认CSS。

关于重置要记住的事情是你知道必须为你使用的每个元素设置样式。例如，列表将没有填充，没有默认列表样式等。您当然可以从重置中删除一些项目，但这样做会破坏它们的目的。

Answer 5

某些标签具有默认样式 - 即使您没有真正声明它们。您可以通过添加simple：

来覆盖此规则

margin:0; 
padding:0;

进入CSS声明。

Answer 6

您的无序列表正在创建40的左边距。用以下代码替换代码：

div#listDiv ul {list-style-type:none;
 padding:0;
 }

如果你刚刚开始，你会遇到很多默认风格的麻烦。坚持下去，你将学习。我们都必须从某个地方开始！

奇怪的Div填充

6 个答案: