空白继浮动：左和明确的：既

Question

我使用float: left通过侧堆叠两个div侧。然后，我使用clear: block清除浮动内容，但是浮动的div和下一个div之间会出现一个小的空白。

我已经加入overflow: none在页面上的每一个元素，因为我看到了作为工作的其他人有类似的问题，但没有解决问题的解决方案。

#featured-container {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: -60px;
}

#featured-header {
    display: inline-block;
    width: 240px;
    height: 30px;
}

#featured-label {
    float: left;
    width: 160px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #EEEEEE;
    font-weight: 700;
}

#featured-point {
    float: left;
    width: 0;
    height: 0;
    border-bottom: 30px solid #EEEEEE;
    border-right: 30px solid transparent;
}

#featured {
    display: inline-block;
    width: 220px;
    min-height: 220px;
    padding: 10px;
    background: #EEEEEE;
}

.clear {
    clear: left;
}

<div id="featured-container">
    <div id="featured-header">
        <div id="featured-label">FEATURED</div>
        <div id="featured-point"></div>
    </div>
    <div class="clear"></div>
    <div id="featured">

    </div>
</div>

编辑：我知道我可以负margin-top添加到“#featured”框，但我真的想明白为什么这个问题的存在。

。

Answer 1

尝试将inline-block更改为inline-flex

#featured-header {
    display: inline-flex;
    width: 240px;
    height: 30px;
}

Answer 2

在父元素上设置font-size: 0;。该空格是字符空格，因此将font-size设置为零会使空格的大小也为零。但是，您需要将inline-block子元素的字体大小重新设置为所需的大小。

#featured-container {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 0px;
    font-size:0px;
}

#featured-header {
    display: inline-block;
    width: 240px;
    height: 30px;
}

#featured-label {
    float: left;
    width: 160px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #EEEEEE;
    font-weight: 700;
    font-size:18px;
}

#featured-point {
    float: left;
    width: 0;
    height: 0;
    border-bottom: 30px solid #EEEEEE;
    border-right: 30px solid transparent;
}

#featured {
    display: inline-block;
    width: 220px;
    min-height: 220px;
    padding: 10px;
    background: #EEEEEE;
    font-size:16px;
}

.clear {
    clear: left;
}

<div id="featured-container">
    <div id="featured-header">
        <div id="featured-label">FEATURED</div>
        <div id="featured-point"></div>
    </div>
    <div class="clear"></div>
    <div id="featured">

    </div>
</div>