margin的塌陷现象跟合并现象

emmm，初学html,所以将自己所遇到的问题以及自己的解决方法给写下来。

一、margin上边距造成的塌陷现象

首先给出两个为父子关系的盒子，

当子盒子加上margin-top:50px; 时就出现了问题。

当我们给子盒子加上margin-top:50px;  结果却是父盒子也随着子盒子的移动跟着下来，这叫塌陷现象啦。

如果我们还是需要完成子盒子距离父盒子顶部50px,

可以用两种方法结局

1、给父盒子也就是红色盒子加上内边距padding-top:50px; 这跟原来想要达成的效果一样，但是如果使用padding后不想父盒子的高产生变化就需要把原来的宽高减去50px；

2、也可以选择给父元素加上border,也可以避免塌陷，但设置边框后边框会占据空间，也应减去设置的边框占据的长度。

╮(╯▽╰)╭