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

Question

我有三个<div> s 并想将第二个上移。

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

唯一的缺点是:第二个 <div> 之间有一个间隙(20px)第三个<div> (在第二个 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 }