html - 境界線が親の外に出ているのはなぜですか?

Question

これが私のテストケースです：

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

.outer の境界線を .inner 内のコンテナにしたい

最終的に達成したい効果は、明るい灰色のボックスが暗い灰色のボックスよりも上下が 10 ピクセル薄いことです (したがって、薄い明るい灰色のボックスは暗い灰色の真ん中にあります)。

Answer 1

アウターのオーバーフロー プロパティを制御する必要があります。例のように: overflow: hidden;.

Answer 2

余裕を持って少し「遊ぶ」必要があります。

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;
}

上から10px.outerのdivを設定し、次に上から-10pxのdivを設定します。もちろん、要素のサイズを変更する場合は、余白の値も変更する必要があります。.inner.inner/.outer