父子级外边距合并的解决方式
- 解决方式:1
- 解决方法2
- 解决方法3
- 解决方法4
- 方法总结
下面展示一些代码，看看出现的结果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0 auto; } .outer{ width: 200px; height: 200px; background-color: red; } .outer>div{ width: 50px; height: 50px; background-color: blue; } </style> </head> <body> <div class="outer"> <div></div> </div> </body> </html>
所得结果如下图
接下来使蓝色区域与红色区域的上边框产生一定的间距，添加如下代码，看看结果。
.outer>div{ margin-top:100px; } 所得结果如下图，蓝色区域与红色区域的上边框并没有产生间距
解决方式:1
.outer{ border:1px solid red; } 蓝色区域与红色区域的上边框分离了
解决方法2
.outer>div{ margin-left:100px; /*可自行设置距离*/ float:left; } 所得结果如下图
解决方法3
.outer{ overflow:hidden; }
解决方法4
将本应该设置给子元素的外边距设置给父元素的内边距
*{box-sizing:border-box;} /*将盒子类型设置为边框盒子*/ .outer{ padding-top:100px; } .outer>div{ /*margin-left:100px;*/ } 也能得到下图
还有一些方法，等着你去探索！！！
方法总结
1.给父元素添加边框属性
2.给父元素/子元素添加浮动属性
3.给父级元素设置overflow:hidden属性
4.将本应该设置给子元素的外边距设置给父元素的内边距
本文地址：https://blog.csdn.net/song_dehao/article/details/107864307
