css 父子元素margin,CSS外边距合并：子元素的margin-top外边距被作用在父元素

[摘要]

CSS外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。不理解此规范的话，会在前端布局中出现异常问题，本文深入浅出学习此规范，并提供解决办法。

不得不说前端是一个水很深的行业，虽然起点低，稍微一学就能入门；但是很多实操型的知识如各种兼容性、规范性问题不在实际操作中遇到是无法深刻的理解的，笔者就遇到了CSS外边距合并这一看似非主流却很主流的问题。

问题描述：

笔者想得到一个两个内套的盒子模型，并设置子盒子的上边距为50px;于是写了如下代码。

padding-demo

* {padding:0;margin:0;border:0;}

.wrap {

width: 600px;

margin: 0 auto;

background: grey;

height: 300px;

}

.wrap .box {

font-size: 18px;

color: #fff;

width: 300px;

height: 100px;

line-height: 100px;

margin: 0 auto;

background-color: orange;

margin-top: 50px;

text-align: center;

}

我是内容

但在浏览器中得到的确实下图的效果：