两个块级元素嵌套,如果里面的元素没有设置border 属性,在内层的 元素使用margin 时会把父元素节点 也会跟着移动, 故外边距塌陷问题,
解决方法 ,可以给父元素添加border ,或者给父元素 添加一个属性 overflow: hidden;的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .one{ width: 500px; height: 500px; border: 1px dashed red; /* background-color:yellowgreen; */ /* overflow: hidden; */ } .two{ width: 300px; height: 300px; /* border: 1px dashed black; */ background-color: darkgoldenrod; margin: 50px 50px; } </style> </head> <body> <div class="one"> <div class="two"></div> </div> </body> </html>
标签:width,color,元素,塌陷,background,外边,border,css From: https://www.cnblogs.com/qutao125/p/16730109.html