将Div向上移动20px - 但保持边界

Question

我有三个<div>，并且想要移动第二个。

目前我正在使用position: relative; top: -20px;执行此操作 - 这非常有用。

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

所以，我想保留所有三个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

像这样：fiddle

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/