htmlcssmargin

Why does margin-top push my outer div down?

I have a header div as the first element in my wrapper div, but when I add a top margin to a h1 inside the header div it pushes the entire header div down. I realize this happens whenever I apply a top margin to the first visible element on a page.

Here is a sample code snippet.

div#header{
    width: 100%;
    background-color: #eee;
    position: relative;
}

div#header h1{
    text-align: center;
    width: 375px;
    height: 50px;
    margin: 50px auto;
    font-size: 220%;
    background: url('../../images/name_logo.png') no-repeat;
}
<div id="header">
    <h1>Title</h1>
    <ul id="navbar"></ul>
</div>

Solution

  • put overflow:auto in the parent div
    see more in this link