css - 神秘的填充物

Question

这是我正在处理的布局的简化版。为了简洁起见，我将其缩减并使我遇到的问题更加明显。

我无法确定包装在“wrapper1”中的元素之间的填充来自何处。理想情况下，我不应该从 wrapper1 的背景中看到任何红色，并且里面的所有东西都应该相互紧贴。

有什么想法吗？

CSS

.wrapper1 {
    float:left;
}

.wrapper2 {
    background-color:#F00;
}

.box-outer {
    display:inline-block;
    background-color:#09F;
    width:50px;
    height:108px;
}

.wrapper3 {
    display:inline-block;
    background-color:#390;
    border:2px solid #000;
}

.box-inner {
    background-color:#999;
    position:relative;
    border:2px solid #FF0;
    width:300px;
    height:100px;
}

HTML

<div class="wrapper1">
    <div class="wrapper2">
        <div class="box-outer"></div>
        <div class="wrapper3">
            <div class="box-inner">
            </div>
        </div>
    </div>  
        <div class="wrapper2">
        <div class="box-outer"></div>
        <div class="wrapper3">
            <div class="box-inner">
            </div>
        </div>
    </div>
        <div class="wrapper2">
        <div class="box-outer"></div>
        <div class="wrapper3">
            <div class="box-inner">
            </div>
        </div>
    </div>
</div>

Answer 1

您将内部 div 变成了内联元素，这意味着它们将使用它们之间的空白区域。

写成...</div><div ...差距将会消失。

编辑:哦，那只是处理的水平空间。垂直空间是由位于基线的内部 div 和在基线下方留出空间的外部 div 引起的。 vertical-align应该解决这个问题。