未知 CSS 崩溃边距，navbar/body 对比第一个 div

Question

我正在努力消除导航栏与其下方 div 之间明显臭名昭著的差距。

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

我试过 display:inline-block，我试过 margin:0 !important 页面上的几乎每个元素，其他时候已经有人提出过很多建议，我正在慢慢进行疯狂地想解决这么简单的问题。

请帮忙！

Answer 1

这可能是一个有点棘手的解决方法，但您可以将导航栏的底部边距设置为负值（在本例中为 -20 像素），将内容向上移动并消除间隙。

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 崩溃边距，navbar/body 对比第一个 div

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

html

css

margins

twitter-bootstrap