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应该解决这个问题。

Answer 2

Mr. Lister是正确的，因为它是inline-block给您带来问题的空白区域。

而不是必须通过从标记中删除空格来解决这个问题......

除非您有令人信服的理由使用inline-block，否则通过将这些实例替换为float:left（这反过来隐含地应用display:block），此布局似乎正常。

演示：http://jsfiddle.net/yV89U/

神秘的填充物

2 个答案: