將div上移20px - 但保留邊框

Question

我有三個<div> s，並且想要移動第二個。

目前我正在這樣做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

您需要刪除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/

Answer 3

取出的position: relative，而是top: -20px你應該添加margin-top: -20px

像這樣：fiddle