解决子元素设置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;

                     }

 

 

 

posted @ 2019-04-16 18:04  八十易  阅读(4016)  评论(0)  编辑  收藏  举报