The margin of h1 tag in HTML pushed its container down

Question

Just look at the picture below. I don't know why the header (blue block) has gone down a little bit. I mean, the blue block should exactly touch the end of the content area of the browser. Some people told me that is because of the margin of h1. But I think this margin can only cause h1 to go down a little bit inside the blue block instead of making the entire blue block go down. Who can help me? Thanks a lot!

Sorry, the code is now added below.

<!DOCTYPE html>
<html>
<head>
<title>just for test</title>
<style>
    body,html {
        margin: 0;
    }

    header {
        background-color: blue;
        height: 200px;
        width: 1200px;
        margin: 0 auto;
        text-align: center;
        padding: 0;
    }

    h1 {
        color: white;

    } 

</style>
</head>
<body>
    <header>
        <h1>Why does it have to be like this?</h1>
    </header>
</body>
</html>

Margin controls the spacing outside of your div, padding controls the spacing inside. Remove the margin from the H1 tag and you'll be set. — JD Davis, Nov 20 '15 at 16:45
If you include the HTML and CSS, someone might be able to help you. — RyanS, Nov 20 '15 at 16:59
Probably the old "collapsing margins" thing - http://stackoverflow.com/questions/2680478/margin-top-push-outer-div-down — Paulie_D, Nov 20 '15 at 17:14

score 0 · Answer 1 · answered Nov 20 '15 at 16:49

Here's a quick example for you.

The following code returns these results:

<h1 class="nomargins">Testing 1</h1>
<h1 class="margins">Testing 2</h1>

.margins {
  width: 500px;
  height:200px;
  background-color:#0000ff;
  float:left;
}

.nomargins {
  width:500px;
  height:200px;
  margin: 0;
  background-color:#ff0000;
  float:left;
}

Notice how the only difference is the color and the margins.

Harsh Dadhaniya · Answer 2 · 2019-06-18T12:24:48.827

It's a margin collapse issue. h1 tag which contains some text within it and wrapped within the container given by header. now h1 tag is not getting its margin-top inside the container and it pulls whole container down by its default margin because of margin collapse issue (because margin-top of h1 tag is collapsed to 0). If you say h1 should have margin inside the container then you need to use either padding,border,display:inline-block or overflow: auto property inside header {}

After giving any one property from above list you can prevent margin collapse of h1 tag and the text contained by h1 tag will have margin inside container and will get justice so after this h1 tag's margin will not be compromised.

I see, you have given padding but with 0 value, so it won't work. You have to give some value to it.

The margin of h1 tag in HTML pushed its container down

2 Answers2