setting the top margin of the h1 element in the header does not work as expected

问题

I have made use of the html5 header tag and an h1 tag within it. After setting up the top margin property of the h1 element in my header to 0px, i manage to remove the top margin of the header, but i want the h1 element inside my header to have a top margin of around 15px.

Now when i try setting the top margin of the h1 element, it also creates a top margin for the header which i don't want.

Can someone help me out with this...?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="normalize.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">

    <title>Codename : ENT</title>
</head>
<body>
    <header>
        <h1>Site Title / LOGO</h1>
        <p>Site Tagline / Slogan / One liner.</p>
        <p></p>
        <nav></nav>
    </header>
    <div id="content_wrapper"></div>
    <footer>
    </footer>
</body>
</html>

and CSS

header {
    background-color:#ff0
}

header h1 {
    margin-top:0;
    margin-left:15px
}

header p {
    margin-left:15px
}

回答1:

Use padding-top for h1 or header or use overflow:hidden for header

回答2:

The issue you are facing here is call collapsing margins

Here is an excerpt from this mozilla article:

Parent and first/last child

If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

So I could fix this by adding a border to the header element - DEMO

header {
    border: 1px solid transparent;
}

or by clearence - DEMO

header {
    overflow: hidden;
}

or by adding padding - DEMO

header {
    padding: 1px;
}

... etc etc

回答3:

As mentioned is every other answer, what you actually want is padding-top, not margin-top.

The difference between these two is pretty easy to understand, essentially padding is inside the element, and margin is outside the element, the last two examples from this tutorial show it fairly well http://html.net/tutorials/css/lesson10.php

So with your code, the header element is the container, adding margin-top:15px will move the element down 15px, meaning the whole container, yellow background included, sits lower. Adding padding-top:15px with increase the height of the header element by 15px, by adding to the top of the element, and moving the content down, leaving a yellow gap of 15px at the top.

回答4:

Add padding-top: 15px; to the properties of h1.

回答5:

try this one

header h1 {
    padding-top:15px;
    margin-top:0;
    margin-left:15px
}

回答6:

Demo

css

header {
    background-color:#ff0;
    margin:0;
    display: inline-block; /* add this to make it inline as <header> id block element by default */ 
    width: 100%; /* for 100% width */
}
header h1 {
    margin-top:15px;
    margin-left:15px
}
header p {
    margin-left:15px
}

来源：https://stackoverflow.com/questions/25114186/setting-the-top-margin-of-the-h1-element-in-the-header-does-not-work-as-expected

标签

html

css

html5

css3