将 Div 向上移动 20px - 但保留边框

Question

我有三个<div>，想把第二个向上移动。

目前我正在用position: relative; top: -20px;做这件事 - 效果很好。

唯一的缺点是：第二个<div>和第三个<div>(在第二个div下(之间存在差距(20px(。

所以，我想在所有三个div周围保持边框，这样top: -20px就不是第三行的替代品。

我在这里有这个说明：http://jsfiddle.net/w2PGF/1/

我的标记：

<div id="border">
    <div class="firstRow">foo</div>
    <div class="secondRow">bar</div>
    <div class="thirdRow">foobar</div>
</div>​

我的 CSS：

#border {
    border: 5px solid #000;
}
.firstRow {
    background-color: cyan;
    border: 3px solid red;
    height: 50px;
}
.secondRow {
    position: relative;
    top: -20px;
    border: 3px solid yellow;
    background-color: grey;
    height: 50px;
}
.thirdRow {
    background-color: blue;
    border: 3px solid blue;
    height: 50px;
}

提前谢谢。​

Answer 1

.secondRow { margin-bottom: -20px }

Answer 2

删除position: relative，而不是top: -20px，您应该添加margin-top: -20px

像这样：小提琴

Answer 3

您需要

删除top: -20px并将margin-top: -20px添加到.secondRow

所以.secondRow看起来像这样：.

secondRow {
    margin-top: -20px;
    border: 3px solid yellow;
    background-color: grey;
    height: 50px;
}

检查此 JSFiddle： http://jsfiddle.net/w2PGF/6/