0

Here is my HTML file: 

<!DOCTYPE html>

<html>
    <head>
        <title>test</title>
        <link type="text/css" rel="stylesheet" href="style.css"/>
    </head>

    <body>
    <div id="header">
        <h2>Hi</h2>
    </div>

    </body>
</html>

Here is my CSS file:

#header {
    background-color: blue;
    position: relative;
    top: 5px;
    border: 2px solid black;

}

h2 {
    text-align: center;
    font-size: 100px;
}

When I add the "border: 2px solid black;" line in the CSS, the #header div suddenly becomes really tall. How do I make it not do this? I've tried altering padding and height but it doesn't work.

Why does adding a border do this, and how do I change this? Thanks! First post on stackexchange so apologies if this is formatted incorrectly :)

user3175124
  • 1

1 Answers1

0

Set the margin to 0 on the h2 element.

h2 { 
  text-align: center;
  font-size: 100px;
  margin: 0;
}

See it working here: http://jsfiddle.net/r2ykc/

berrberr
  • 1,914
  • 11
  • 16