Question

我有以下部分的html

<div class="header">            
    <div class="header-bar">
        <div class="pull-left">
            <div class="title">Ci models database</div>
        </div>
    </div>              
    <div class="clear-both"></div>
    <ol class=breadcrumb>
        <li class="active"><a href="#">All models</a></li>
    </ol>
</div>

css（面包屑和活动类是bootstrap）

.header-bar {
    border: None;
    background-color: #66CCFF;
    min-height:30px;
}

.title {
    padding: 5px 5px 10px 5px;
    color: white;
    font-size: large;
}
.clear-both{
    clear:both; 
}

但是在header-bar和breadcrumb html之间添加了一个空格（see bootply）。如何删除此空格，因为在div之间找不到填充和边距。

Answer 1

问题是内部.title div的计算高度大于容器.header-bar的计算高度。高度，最小高度，边框，填充等属性可以直接影响高度，而显示，盒子大小和位置等属性都可以间接影响高度。

结果是内部.title div将流中的下一个div压下10px。

CSS没有规则说div必须包含它的高度中的子项并阻止它们影响其他div even when height is directly defined。我们需要准确地告诉它在呈现内容时应该如何表现。

有几种方法可以解决这个问题：

http://www.bootply.com/Qa1ME2M2uk - 在父级上使用overflow: hidden;。 Overflow is a css property用于控制子元素大于父元素时发生的情况。值得注意的是，取决于其他属性，溢出不一定会以扰乱布局的方式呈现自己。
http://www.bootply.com/ssq3EAzeyk - 设置明确的高度以严格控制元素的尺寸。这可能是标题栏的最佳选择。
http://www.bootply.com/yeodYRLLJk - 在父级上设置更大的最小高度，其中一个肯定会包含子级。如果您的填充用于对齐目的，这非常有用 - 在示例中设置min-height: 40px;就是这样做。
http://www.bootply.com/GznfJxUWUF - 删除使元素计算得更高的填充（如另一个答案中所述）。

Answer 2

您必须向两个父容器（float: left和.header-bar）添加breadcrumb，否则明文不会影响任何内容。此外，您必须提供两个容器width: 100%

.header-bar {
    border: None;
    background-color: #66CCFF;
    min-height:30px;
    width: 100%;
    float: left;
}

.breadcrumb {
    width: 100%;
    float: left;
}

.title {
    padding: 5px 5px 10px 5px;
    color: white;
    font-size: large;
}
.clear-both{
    clear:both; 
}

Answer 3

Apostolos，白色空间来自.title类底部填充10px。
归零，白色空间就会消失。

.title {
    padding: 5px 5px 0px 5px;

向左浮动后清除在两个div之间创建一个空格

3 个答案: