Question

我知道还有另外一个这样的问题，但是我试过了，答案没有用。

我有p div，我希望能够在p上使用反向（负）边距。目前它不会影响p，但会影响div。

以下是代码：

.reset {
    margin-left:4px;
    margin-top: 4px;
    height:50px;
    width:50px;
    background:#FFF;
}
.reset p {
    margin-top:-4px;
    font-size: 38px;
    font-family: sans-serif;
    text-align: center;
}

提前致谢

Answer 1

我不确定您的整个解决方案，但将div设置为relative，将<p>设置为absolute可以让您找到正确的方向。这是一个fiddle来玩。

 .reset {
        margin-left:4px;
        margin-top: 4px;
        height:50px;
        width:50px;
        background:Silver;
        position: relative;

    }
    .reset p {
        position:absolute;
        margin-top:-4px;
        font-size: 38px;
        font-family: sans-serif;
        text-align: center;
    }

[UPDATE]

另一个答案（现已删除）中的评论提到负边距不是有效的CSS。要使用此功能，请将.reset p更改为：

.reset p {
    position:absolute;
    top: -4px; //or whatever you want
    left: 0px;  //or whatever you want
    font-size: 38px;
    font-family: sans-serif;
    text-align: center;
}

Answer 2

它不起作用，因为您的p是div的第一个元素。因此，您的p和div的的边距顶部有点合并。

例如，如果您将margin-top: 20px放在p 和 div上，则只会产生20px的上边距，而不是40px。

最简单的方法是使用position: relative;：

p { position: relative; top: -4px; }

这样，p仍处于常规流程中，但你将它移动了4px。

css div继承了孩子的反向边缘

2 个答案: