邊界爲什麼會出現在父級之外？

Question

這裏是我的測試案例：

http://codepen.io/jgclifton/pen/hKynd

我要上.outer邊界是.inner內部容器

最後我想達到的效果是淺灰色框10px的薄頂並且比深灰色框的底部（因此較薄的淺灰色框在深灰色的中間）。

Answer 1

我們只需要 「玩」 了一下同裕：

CSS變化：

.outer { 
    width: 100%; 
    height: 80px; 
    background-color: #CCCCCC; 
    border-top: 10px solid white; 
    margin-top: 10px; 
} 

.inner { 
    width: 960px; 
    height: 100px; 
    background-color: #999999; 
    margin: -10px auto 0; 
} 

我們設置.outer DIV 10px的從頂部，然後.inner DIV 頂部爲-10px。那麼當然如果我們改變.inner/.outer元素的大小，我們也將不得不改變它們的邊際值。

Answer 2

你必須控制外部的溢出屬性。例如：overflow: hidden;。