Css 顶部边框向下推动收割台_Css_Html_Border

Css 顶部边框向下推动收割台

css html

Css 顶部边框向下推动收割台,css,html,border,Css,Html,Border,出于某种原因，下面的html作品没有顶部边框。但是，只要我添加一个上边框，h1就会被向下推，并且上面似乎有一条空行应该发生什么： +--------------- | Title +--------------- 边框顶部宽度：0px | | Title +--------------- 边框顶部宽度：1px +--------------- | +-Title--------- test.html： <html> <head> <link href="te

出于某种原因，下面的html作品没有顶部边框。但是，只要我添加一个上边框，h1就会被向下推，并且上面似乎有一条空行

应该发生什么：

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

边框顶部宽度：0px

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

边框顶部宽度：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.png是一个110像素高的png图像。

这是因为默认情况下（默认浏览器样式表）

h1

元素具有顶部和底部的

边距
添加边框顶部：1px
时，边距
将成为h1
和标题之间的距离，而不是h1
和正文之间的距离
浏览器重置可以解决此问题
您会注意到，在中勾选规范化CSS时，它工作得非常好。
这是因为默认情况下（默认浏览器样式表）h1
元素具有顶部和底部的边距
添加边框顶部：1px
时，边距
将成为h1
和标题之间的距离，而不是h1
和正文之间的距离
浏览器重置可以解决此问题
您会注意到，在中勾选规范化CSS时，它工作得非常好。
试试看
#title {
    margin-top:0px;
    font-size:87px;
    text-indent:5px;
}

试一试
我看不出这个问题。你能检查一下我的演示吗：@roberkules你已经勾选了规范化CSS。我看不出问题。你能看看我的演示吗：@roberkules你已经勾选了CSS。有关更多信息，OP可以研究CSS“边距折叠”。好的，我理解边距折叠。然而，我无法理解为什么它在JSFIDLE或“浏览器重置”（我刚刚更改了边距，所以没有尝试重置）中工作。@Robert我认为浏览器重置会将h1
上的边距归零。的确如此。有关更多信息，OP可以研究CSS“边距折叠”。好的，我理解边距折叠。然而，我无法理解为什么它在JSFIDLE或“浏览器重置”（我刚刚更改了边距，所以没有尝试重置）中工作。@Robert我认为浏览器重置会将h1上的边距归零。
#title {
    margin-top:0px;
    font-size:87px;
    text-indent:5px;
}