Top Border pushes header down

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.

Answers


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.


Need Your Help

How can I wait on a BackgroundWorker's completion?

.net wpf winforms backgroundworker

I would like to use the BackgroundWorker to perform a database transaction from a GUI.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.