0

即使在我用 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 开发人员工具和 Firebug 向我展示了它们没有为这些 div 设置默认边距值，但正如人们所看到的那样，它们就在那里。希望你能给我一个提示如何摆脱它们——这真的让我发疯了。

提前致谢！

4

5 回答 5

7

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

* {
    margin: 0;
}
于 2009-07-24T13:38:19.730 回答
3

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

于 2009-07-24T13:34:58.470 回答
3

边距位于 #content div 中的 p 标签上

希望这对您有所帮助

于 2009-07-24T13:36:11.777 回答
1

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

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

于 2009-07-24T13:33:57.973 回答
0

当我之前看到这个时，我在包含 DIV 的底部添加了一个 padding-bottom:1px 以便我可以保留段落的边距

希望有帮助

于 2012-03-28T19:33:08.310 回答