Home/ Questions/Q 5951205
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T17:30:13+00:00

For some reason, the following html works find without a top border. But as

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0