Question

我在div中有一个div，他们都有边框。如何让内部div的顶部边框与外部div的边界重叠？

HTML：

<body>
    <div id = "outerdiv">
        <div id = "innerdiv">
            content
        </div>
    </div>
</body>

CSS：

#outerdiv{
    border: 1px solid black;
}

#innerdiv{
    border-top: 1px solid white;
}

我希望边框在彼此的顶部对齐，以便内部div可以取消底部边框，并且该部分看起来就像顶部缺少一部分边框。

这适用于底部边框，但不适用于顶部。

Answer 1

将#innerdiv改为position:relative; top:-1px。

Answer 2

这很麻烦，但你可以将元素向上移动1px：

#innerdiv {
    position: relative;
    top: -1px;

    border-top: 1px solid white;
}

为什么不将border-top: 1px solid transparent;添加到父级？