html - 0 x 0 相对 Div 仍然占用空间

Question

我正在设计一个网页，在某些行的正文右侧有一个小标签。为此，我创建了一个绝对定位的 <div>在相对定位的内部。

标签完全符合我的要求。但是，即使绝对定位 <div>尺寸为 0 x 0，它仍然占用了一些空间。

这可以在 http://jsfiddle.net/sznH2/ 看到.我希望这两个按钮垂直排列。相反，标签旁边的按钮被向左推了几个像素。

谁能看出造成这种间距的原因以及如何消除它？

HTML:

<div>
    <div class="pull-right">
        <button>Hello world!</button>
    </div>
</div>
<div>
    <div class="pull-right">
        <button>Hello world!</button>
        <div class="outer-relative">
            <div class="inner-relative">
                <span>XXX</span>
            </div>
        </div>
    </div>
</div>

CSS:

body {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.pull-right {
    text-align: right;
}
.outer-relative {
    display:inline-block;
    position:relative;
    height: 0px;
    width:0px;
}
.inner-relative {
    position: absolute;
    left: 0px;
    top: -15px;
    background-color: Lime;
}

Answer 1

内联 block 元素将呈现标签之间的间距。检查一下:http://jsfiddle.net/sznH2/4/

<button>Hello world!</button><div class="outer-relative"><div class="inner-relative"><span>XXX</span>

去掉空格就可以了