外边距合并可能产生的问题

外边距合并可能产生的问题,可能会出现合并和塌陷问题

外边距合并可能产生的问题_第1张图片外边距合并可能产生的问题_第2张图片

 1、这种现象,先要准备两个盒子:

外边距合并可能产生的问题_第3张图片

 

外边距合并可能产生的问题_第4张图片

 外边距合并可能产生的问题_第5张图片

2、 父元素往下走了20px

外边距合并可能产生的问题_第6张图片

 3、让孩子也走一走

外边距合并可能产生的问题_第7张图片

 外边距合并可能产生的问题_第8张图片

外边距合并可能产生的问题_第9张图片

 4、父元素和子元素同时存在了margin的情况,就会出现塌陷的情况产生,不能都使用margin:

外边距合并可能产生的问题_第10张图片

 外边距合并可能产生的问题_第11张图片

 5、如何让子盒子能够下来,给父元素指定一个边框就可以避免这种情况的产生

外边距合并可能产生的问题_第12张图片

 外边距合并可能产生的问题_第13张图片

 

 没给边框定义前的效果:

外边距合并可能产生的问题_第14张图片

 给了上边框就可以下来了

外边距合并可能产生的问题_第15张图片

 6、建议把边框改成透明效果

外边距合并可能产生的问题_第16张图片

 7、第二种方法消除同时使用margin会塌陷的效果,定义上内边距

外边距合并可能产生的问题_第17张图片

 8、第三种方法添加overflow:hidden,也可以解决问题      

外边距合并可能产生的问题_第18张图片

你可能感兴趣的:(html,前端)