html - 为什么边界在父母之外？

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

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