外边距重叠的概念
在CSS中，有些元素的上下距离（比如margin-top和margin-bottom），如果挨太近，就会自动挤成一团，形成一个大边距，这就是所谓的边距纠缠。想知道咋回事么？记得有次我把两个块级元素拼一起，结果它们的左右间距就闹了矛盾，最后哪方比较牛逼，赢得了边距？战场上只有强者生存！这种情况经常出现在常规布局的文章中，但对于行内元素或行内块元素就不存在啥纠纷。
哪些元素会发生外边距重叠问题
你晓得不，在流媒体里面，只有大块头的元素才有可能让外边距堵车，那些小不点儿的行内或行内块元素就没事了。这是为啥？就是因为旁边两个“搭档”的脑袋和尾巴都有个距离，要是它们咔嚓撞上了，那多出来的那个边界就成为规则所以咱们还是得留神看清楚这些地方哈。
解决相邻兄弟元素外边距重叠问题
<div>
咋处理全都混在一起的小元素？超简单！只要给后头的元素加上浮动，或者让俩哥们儿套上div外套，顺便加个’border: 1px solid white’;就OK了！这样一来，整个设计瞬间清爽了不少，再也不用被那些琐碎的东西打扰设计效果啦～
#box1{ width: 200px; height: 200px; background: lemonchiffon; margin-top: 50px; } #box3 { width: 100px; height: 100px; background-color: #f12416; margin-top: 50px; }
父级和子级元素margin合并情况
有时候，当你设置父元素跟子元素之间的margin时，它们的距离总让人摸不着头脑，有点儿像是在喝汤的时候吃到虾米了。明明给父亲元素和儿子元素都设置了margin-top为50px，可实际上结果却只出现了50px的间距，这结果和咱们想象的100px可不一致！其实，要搞定这种小麻烦，你只要提前告诉下父元素吞噬：隐藏属性，再加个透明的边框，甚至直接换个inline-block样式也行。
空块级元素自身margin合并
记得，那个白色框与上下两边贴得太紧的话很容易合在一起！这个小问题很好解决~只要加个边框或者涂点颜色到那个白色框上就行了，这样就可以轻松分辨出来了哈。设置边框和填充之后，框子看上去就更清楚明了~
高度为auto父元素与子元素margin合并
要是父级容器空间不够，子级容器会闹腾怎么办？试试加个底边线，或者填充下边，这样就不会乱糟糟了。当然给父级容器设个具体大小限制也是很不错的方法，比如最大或是最小数量，就可以轻松解决这个问题！
总结与思考
搞定CSS外边距重叠，网页设计变得易如反掌！搞定布局难题，网站颜值飙升，用户满意度也跟着上升！所以，在外边距重叠这方面要特别留心，美化界面、提升用户体验就靠它了！敲代码时千万不能忽视可能会发生重叠的地方，找个合适办法就能轻松解决了~
#box1{
width: 200px;
height: 200px;
background: lemonchiffon;
margin-top: 50px;
/*overflow:hidden;*/
/*border: 1px solid #00000000;*/
/*display: inline-block;*/
/*float:left;*/
/*position: absolute*/
/*padding: 10px;*/
}
#box3 {
width: 100px;
height: 100px;
background-color: #f12416;
margin-top: 50px;
/*display: inline-block;*/
/*float:left;*/
/*position: absolute*/
}
各位朋友们，今天给你们普及下CSS外边距重叠的问题，还会教你如何轻松解决！希望对你们有所帮助~
评论0