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

内联块元素将呈现标签之间的间距。看看这个：http: //jsfiddle.net/sznH2/4/

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

删除空格，你就可以开始了

Answer 2

我认为你需要做正确的 postiton:relative 和 external-relative absolute

http://jsfiddle.net/tousif123/sznH2/3/

这是你在找什么？

.pull-right {
    position:relative;
}

.outer-relative {
    position:absolute;
}