Search code examples
htmlcsstwitter-bootstrapmargins

Unknown CSS collapsing margins, navbar/body vs. first div

http://jsfiddle.net/cdecqyfs/

I'm trying to eliminate that apparently notorious gap between the navbar and the div below it.

I can't find the source of the margin through Chrome's developer tools (it just points me to the <body> tag), but I'm reasonably certain it's my div causing the issue, because when I delete the <header>...<header> contents entirely, there's still a 20px gap between the top and the body. HOWEVER, that gap size directly correlates with the value of @navbar-bottom-margin in Bootstrap's LESS files, so I'm sure BS is at play here.

I've tried display:inline-block, I've tried margin:0 !important on nearly every element on the page, numerous suggestions from the other times that this has been asked, and I'm slowly going insane over what should be such a simple issue to fix.

Please help!

Solution

  • Add .masthead-text h1 { margin-top: 0; } seems to be able to fix it. Use padding instead if it needs some spacings around.

    Updated Demo: http://jsfiddle.net/cdecqyfs/5/

    I would also suggest to replace the below code with simple padding values too.

    .masthead-text{
    position: relative;
    top: 140px;
}

    Then it won't be necessary to reset the top margin on the h1.

    Updated Demo 2: http://jsfiddle.net/cdecqyfs/7/