Html 0 x 0相对Div仍占用空间

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

标签的外观完全符合我的要求。但是，即使绝对定位的

尺寸为0 x 0，它仍会占用线路上的一些空间

这一点可以在网站上看到。我希望这两个按钮垂直排列。相反，标签旁边的按钮向左按了几个像素

有人能看到是什么导致了这种间隔以及如何消除它吗

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>

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;
}

---

内联块元素将渲染标记之间的间距。看看这个：

你好，世界！XXX

---

删除空格，就可以开始了

内联块元素将渲染标记之间的间距。看看这个：

你好，世界！XXX

---

去掉空格，你就可以走了

我想你需要做一个向右拉的位置：相对 和外部相对绝对

这就是你要找的吗

.pull-right {
    position:relative;
}

.outer-relative {
    position:absolute;
}

---

我认为你需要做出正确的选择：相对的 和外部相对绝对

这就是你要找的吗

.pull-right {
    position:relative;
}

.outer-relative {
    position:absolute;
}

---

唯一能消除IE中症状的解决方案是

左边距：-4px外部相对类中的code>。我不是100%确定为什么会出现这个问题，所以我希望有人能给出更好的解决方案。如果div必须是0x0 px…为什么不使用显示：无？@Sumurai8查看我的答案，这是因为“内联块”@RyanS我知道内联块会围绕其内容折叠，但我从未意识到它们围绕空格折叠。也可以通过简单地将其设置为块而不是内联块来修复。我给了你+1；-）@peror相对div仅用于将起始位置设置为子div的绝对位置。如果他执行
display:none
，则会隐藏该元素及其子元素。显然，这不是他想要的，因为绝对定位元素也会被隐藏。一个完全消除IE中症状的解决方案是
marginleft:-4px外部相对类中的code>。我不是100%确定为什么会出现这个问题，所以我希望有人能给出更好的解决方案。如果div必须是0x0 px…为什么不使用显示：无？@Sumurai8查看我的答案，这是因为“内联块”@RyanS我知道内联块会围绕其内容折叠，但我从未意识到它们围绕空格折叠。也可以通过简单地将其设置为块而不是内联块来修复。我给了你+1；-）@peror相对div仅用于将起始位置设置为子div的绝对位置。如果他执行
display:none
，则会隐藏该元素及其子元素。显然这不是他想要的，因为绝对定位元素也会被隐藏。你的解释是正确的，但你的小提琴似乎无法证明你所写的内容。你的解释是正确的，但你的小提琴似乎无法证明你所写的内容。谢谢，但是我看不到有任何理由为那些不显示标签的行更改
位置
值。谢谢，但是我看不到有任何理由为那些不显示标签的行更改
位置
值。