Question

即使在用css和html编写的许多行之后，css行为仍然让我感到惊讶 - 这是一种糟糕的方式。

我正在为一位朋友整理一个示例网站，向他展示如何构建他的布局，但是Firefox 3.0.5和IE8在我的#header，＃content和＃footer-div之间产生了空白。如果我在IE7模式下切换，边距消失。

CSS：

html, body {
   background-color: #fff;
   margin: 0;
   padding: 0;
   width: 100%;
}

#page {
   background-image: url('bg_gradiant.png');
   background-repeat: repeat-y;
   width: 950px; /* 770px + 2 * 90px; */
   margin: 0 auto;
   padding-left: 90px;
}

#header {
   width: 770px;
   margin: 0;
   padding: 0;
}

#header #row1 {
   background-color: #9ab3ba;
   height: 50px;
}
#header #row2 {
   background-color: #517279;
   height: 50px;
}

#content {
   width: 770px;
   background-color: #d7e9ed;
}

#footer {
   background-color: #5eb6cc;
   width: 770px;
   height: 150px;
}

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <title>Test</title>
</head>
<body>
<div id="page">
   <div id="header">
      <div id="row1"></div>
      <div id="row2"></div>
   </div>
   <div id="content">
      <p style="height: 600px">Beware of the Content</p>
   </div>
   <div id="footer">
   </div>
</div>
</body>
</html>

您可以在此处查看此页面：https://codepen.io/lx-s/pen/eRrOpL

浏览IE Developer Tools和Firebug告诉我他们没有为这些div设置默认边距值，但正如人们所看到的，他们就在那里。希望你能给我一个如何摆脱它们的暗示 - 它让我疯狂。

提前致谢！

Answer 1

将以下内容添加到样式表中：

* {
    margin: 0;
}

Answer 2

这不是DIV，而是默认设置了边距的P标签。我测试将它设置为0并且空间消失了。

Answer 3

边距位于#content div

的p标签上

希望这对你有所帮助

Answer 4

您需要使用重置css。您应该在您开发的每个网页/网站上执行此操作。一个好的重置CSS将删除许多默认设置，使跨浏览器的外观和感觉更轻松。

其中有几个，例如Eric Meyer's或Yahoo UI Reset CSS。

Answer 5

当我之前看到这个时，我已经在包含DIV的底部添加了一个填充底部：1px，这样我就可以保留段落上的边距

希望有所帮助

Div“默认利润”无处不在

5 个答案: