前端CSS子元素margin-top穿透问题

本文主要是介绍前端CSS子元素margin-top穿透问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

　　当我们在给子元素设置margin-top后会出现一个现象，子元素与父元素之间没有出现间距，反而是父元素和其他元素之间出现了间距，像是margin-top的效果作用在父元素上一样。这种现象就是margin-top穿透现象。

　　如下所示：

　　HTML代码

<div class="father">
    <div class="son">
                
    </div>
</div>

　　CSS代码

*{
    margin: 0;
    padding: 0;
}
.father{
    width: 400px;
    height: 300px;
    background-color: red;
    }
.son{
    width: 200px;
    height: 150px;
    background-color: green;
    margin-top: 100px;
                
    }

　　我们希望的是子盒子的上边距距离父盒子100px，但实际上效果是父盒子距离浏览器的顶线隔开了100px，如下图所示：

　　经过查找资料和测试发现，发生这样的现象需要两个条件：

　　1：父、子元素都为块级元素

　　2：父、子元素必须顶部线重合

　　所以解决这种现象我们只需要打破这两个任意条件即可。

　　解决方案：

　　一：父、子任意元素设置display:inline-block。

　　二：设置父元素padding-top：1px

　　三：设置父元素border-top

这篇关于前端CSS子元素margin-top穿透问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！