Question

以前可能已经讨论过这个问题了，但我找不到相关的帖子。所以这是我的问题：

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

Answer 1

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

编辑：

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

Answer 2

每个浏览器都有自己的HTMl标签实现。所有HTML元素都有自己的边距和填充值，具体取决于浏览器将边距和填充值中的所有元素重置为“0”是一种很好的做法。然后你的边距和填充的样式值完全反映。

在css的开头声明以下内容。

* {margin：0px;填充：0像素;}

由<hx>标记</hx> </div>引起的<div>标记之间不需要的垂直空间

2 个答案: