为什么边界不在父母之外？

Question

这是我的测试用例：

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

我希望.outer上的边框是.inner

中的容器

最终我想要达到的效果是浅灰色盒子的顶部和底部比深灰色盒子薄10px（因此较薄的浅灰色盒子位于深灰色的中间）。

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

我们从顶部设置.outer div 10px ，然后从顶部设置.inner div -10px 。当然，如果我们改变.inner/.outer元素的大小，我们也必须改变它们的边际值。