为什么我的负边距不会超过某个区域？

Question

这是供参考的jsfiddle：http://jsfiddle.net/4devvjyv/1/

我正在尝试让 "Section" 框位于灰线上方，这样 "Section" 框看起来就像这条线居中。但负利润率并没有将盒子推到线上方。

.divider {
    margin-top: 6px;
    border-top: 2px solid gray;
    font-size: 10px;
    position: relative;
}

.divider-text {
    position: relative;
    border: 1px solid black;
    background-color: white;
    display: inline-block;
    padding: 0px 5px;
    margin-top: -200px;
}

分隔符是线，分隔符文本是 "Section" 框。我为分隔线设置了 6px 的 margin-top，这样我就不会弄乱两个内容之间的间距，因为我希望 "Section" 框在线上方 6px 和在线下方 8px。

有谁知道为什么它不起作用？我试着用一个负的左边距玩弄， "Section" 框表现得像它应该的那样。

Answer 1

更新了你的jsfiddle

使用 top: -20px 而不是 margin-top:-200px。我使用 -20px 因为 -200px 会漂浮得很高而且看不见。

.divider-text {
    position: relative;
    border: 1px solid black;
    background-color: white;
    display: inline-block;
    padding: 0px 5px;
    top: -20px;
}

另一个解决方案是

.divider-text {
    position: absolute;
    border: 1px solid black;
    background-color: white;
    display: inline-block;
    padding: 0px 5px;
    margin: -20px; // making it center.
}

从其父元素 (position: absolute) 中释放该元素将使该元素浮动，并遵循负边距。

该元素仍在其父元素之下，因此任何浮动样式都不会超出其父元素，除非您通过 float、position:absolute 或 display:block 释放它。但是显示块实际上并没有从其父级释放元素，而是将其移动到下一个。 -- 虽然需要任何人对此提出意见。

为什么我的负边距不会超过某个区域？

Why won't my negative margins go above a certain area?

css

margin