margin的塌陷现象跟合并现象

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



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


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




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




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


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

可以用两种方法结局

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



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


╮(╯▽╰)╭

你可能感兴趣的:(margin的塌陷现象跟合并现象)