Question

出于某种原因，以下html工程找不到顶部边框。但是当我添加一个顶部边框时，h1会被推下并且上方似乎有一个空行。

应该发生什么：

+---------------
| Title
+---------------

border-top-width会发生什么：0px;

|
| Title
+---------------

border-top-width会发生什么：1px;

+---------------
|
+-Title---------

的test.html：

<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
    <div id="header">
        <h1 id="title">Title</h1>
    </div>
</div>
</body>
</html>

test.css：

body {
    background-color:black;
    font-size:100%;
}

#title {
    font-size:87px;
    text-indent:5px;
}

#header {
    background-image:url('test.png');
    background-repeat:no-repeat;
    background-color:black;
    color:red;
    height:110px;
    border-style:solid;
    border-top-width:0px;
    border-right-width:0px;
    border-left-width:1px;
    border-bottom-width:1px;
    border-color:white;
}

test.png是一个110像素高的PNG图像。

Answer 1

这是因为默认情况下（默认浏览器样式表）h1元素有一个顶部和底部margin。

当您添加border-top: 1px时，margin将成为h1和#header之间的距离，而不是h1和body。< / p>

浏览器重置可以解决此问题。

在jsFiddle中勾选规范化CSS 时，您会注意到它完美无缺。

Answer 2

尝试

#title {
    margin-top:0px;
    font-size:87px;
    text-indent:5px;
}

顶部边框将标题向下推

2 个答案: