0

也许这已经在这里讨论过，但我找不到相关的帖子。所以这是我的问题：

我有一个带有横幅和内容区域的 html 网站。横幅区域在底部有一个边框：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>TEST</title>
    <style type="text/css">
        #banner, #content {
            width: 1000px;
            margin-right: auto;
            margin-left: auto;
        }
        #content {
            background-color: green;
        }
        #banner {
            background-color: red;
            border-bottom: 1px solid rgb(200, 200, 200);
            height: 70px;
        }
    </style>
</head>
<body>
    <div id="banner">
        <h3>Banner</h3>
    </div>
    <div id="content">
        <h3>Content</h3>
    </div>
</body>
</html>

问题是横幅和内容 div 之间的水平空白（我不想要）。

但是，如果我将border-bottom横幅 div 移动到border-top内容 div 的 a ，空白就会消失，并且所有内容都会按照我的预期呈现。这对我来说似乎很奇怪，但至少在 chrome 和 ie9 之间是一致的（尚未测试其他浏览器）。这种行为的原因是什么？这似乎是由 h3 标签引起的。另请注意，页面高度取决于边框的位置。

4

2 回答 2

0

它将是 h 元素的边距。这样做h3{margin:0px;}应该对差距进行排序:)

编辑 ：

如果差距仍然存在，请尝试在 h 元素上进行填充。或者错误可能与横幅和内容之间的边距有关。

于 2012-11-23T14:01:41.420 回答
0

每个浏览器都有自己的 HTML 标签实现。所有 HTML 元素都有自己的边距和填充值，具体取决于浏览器。将边距和填充值中的所有元素重置为“0”是一个很好的做法。那么您的边距和填充样式值会准确反映。

在您的 CSS 开头声明以下内容。

*{ 边距：0px; 填充：0px;}

于 2012-11-23T15:04:01.363 回答