Question

我正试图消除导航栏和它下面的div之间明显臭名昭着的差距。

我无法通过Chrome的开发者工具找到保证金的来源（它只是指向我<body>标签），但我有理由相信这是我的div导致问题，因为当我删除完全<header>...<header>内容，顶部和身体之间仍有20px的差距。但是，这个间隙大小与Bootstrap的LESS文件中@navbar-bottom-margin的值直接相关，所以我确信BS在这里发挥作用。

我已经尝试了display:inline-block，我在页面上的几乎每个元素上都尝试了margin:0 !important，其他时候有很多建议已经提出过这个问题，而且我慢慢疯了应该修复这么简单的问题。

请帮忙！

Answer 1

这可能是一个hacky变种方法，但您可以将导航栏的margin-bottom设置为负值（在这种情况下为-20px），将内容向上移动并消除差距。

http://jsfiddle.net/9LLo35kt/1/

/* The .masthead css doesn't need to be modified */
.masthead {
    background: url('http://i.imgur.com/LAtiqI6.jpg') no-repeat;
    height: 400px;
}
    .masthead-text{
        position: relative;
        top: 140px;
        padding: 0 15%;
        color: #eee;
    }
    .masthead-text h1{
        font-size: 5em;
        text-shadow: -2px -2px 0px rgba(0,0,0,0.2);
    }
    .masthead-text h2{
        font-size: 2em;
        text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
    }

/* The important stuff: change this value from 0px to -20px */
.navbar { margin-bottom:-20px !important; }

Answer 2

添加.masthead-text h1 { margin-top: 0; }似乎能够修复它。如果需要一些间距，请使用padding。

更新了演示： http://jsfiddle.net/cdecqyfs/5/

我还建议用简单的padding值替换下面的代码。

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

然后没有必要重置h1上的上边距。

更新了演示2： http://jsfiddle.net/cdecqyfs/7/

未知的CSS折叠边距，导航栏/正文与第一个div

2 个答案: