如何使内部div的顶部边框与外部div的顶部边框重叠？

I have a div within a div and they both have borders. How do I make that inner div's top border overlaps the outer div's border?

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

I want the borders to line up on top of each other so that the inner div would cancel out the bottom border and that section would look like there was a part of the border missing on top.

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

This works on the bottom border but not on the top.

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

2 个解决方案

#1

Give your #innerdiv a position:relative; top:-1px.

给你的#innerdiv一个位置:相对;顶部:-1px。

#2

It's hacky, but you could shift the element up by 1px:

它很hacky,但你可以将元素向上移动1px:

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

    border-top: 1px solid white;
}

Demo: http://jsfiddle.net/4A8LF/

Why don't you just add border-top: 1px solid transparent; to the parent?

你为什么不添加border-top:1px solid transparent;给父母?

#1