For some reason, the following html works find without a top border. But as soon as I add in a top border, the h1 is pushed down and there appears to be a blank line above it.
What's supposed to happen:
+---------------
| Title
+---------------
What happens with border-top-width:0px;
|
| Title
+开发者_运维技巧---------------
What happens with 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 is a 110 pixel high PNG image.
This is because by default (the default browser stylesheet) h1 elements have a top and bottom margin.
When you add the border-top: 1px, the margin becomes the distance between the h1 and #header, not h1 and body.
A browser reset can fix this.
You will notice when ticking Normalized CSS in jsFiddle, it works perfectly.
Try
#title {
margin-top:0px;
font-size:87px;
text-indent:5px;
}
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论