Question

我在block1和block2之间获得了display: inline-block样式的不必要的保证金。请参阅此jsFiddle。

HTML

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div>
        <div id="block2">
            block2
        </div>
    </div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
#container {
    background-color: #f00;
    width: 100%;
    height: 200px;
}
#innercontainer {
    background-color: #0f0;
    width: 200px;
    height: 200px;
    margin: 0px auto;
}
#block1, #block2 {
    display: inline-block;
    background-color: #00f;
    height: 200px;
}

当我将HTML更改为此时，边距消失了：

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div><div id="block2">
            block2
        </div>
    </div>
</div>

或者这个：

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div><!--
     --><div id="block2">
            block2
        </div>
    </div>
</div>

虽然我更喜欢后者，但我仍然想知道是否有人知道解决方案以便我可以使用原始HTML，但innercontainer中没有空格显示。另请注意，我希望避免在float: left;和block1上设置block2或使其position: absolute|relative浮动，因为这会在我的布局中产生其他问题。有什么想法吗？

修改

好的，所以我的布局遇到了更多麻烦。当我向block1添加一个图像时，整个块向下移动，非常奇怪（见jsFiddle）。我现在正在使用float: left，并且必须弄清楚如何添加消耗右侧自由空间的div。

Answer 1

更新css的这一部分：

#block1, #block2 {
    display: block;
    float: left;
    background-color: #00f;
    height: 200px;
}

当你是内联时，空格需要空间！

编辑：

安全地更改HTML的这一部分

<div id="container">
    <div id="innercontainer">
        <div id="block1">
            block1
        </div>
        <div id="block2">
            block2
        </div>
        <div style="clear: both"></div>
    </div>

Answer 2

如果您想使用display: inline-block;。您需要像提到的那样缩小标签之间的差距。因为它本身也被视为内联元素。如果两个标记之间有空格或换行符，则会在它们之间产生间隙。

您可以通过将周围容器的font-size设置为0并将其设置回子节点来解决此问题。

#innercontainer {
    background-color: #0f0;
    width: 200px;
    height: 200px;
    margin: 0px auto;

  font-size: 0px;

}
#block1, #block2 {
    display: inline-block;
    background-color: #00f;
    height: 200px;

  font-size: 15px;

}

http://jsfiddle.net/SbUwt/27/

删除因HTML中的换行而导致的不需要的边距

2 个答案: