原因:子元素和父元素的上边框重合

前端开发在重构页面的时候,子集需要按照设计图来设计尺寸

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

有的时候给子元素设置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;

                     }

 

 

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄