解决子元素设置margin-top，效果到父元素上的问题
原因:子元素和父元素的上边框重合
前端开发在重构页面的时候,子集需要按照设计图来设计尺寸
有的时候给子元素设置margin-top 子元素没有效果,反而父元素起到了 margintop效果,原因就是子元素和父元素上边框重合在一起
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> * { margin:0; padding: 0; } </style> <body> <div style = "background:orange;"> <p style ='height:100px;margin-top:40px;background:red'></p> </div> </body> </html>
解决办法
1为父元素设置内边距padding。来代替给子元素设置margin-top
2为父元素设置边框border。
3为父元素设置 overflow: hidden 。
4内容生成(推荐)。代码如下：
element(父元素):before{
content:'';
display:table;
}
