CSS外边距塌陷问题

2024-10-19 59 阅读1分钟

<head>
<style>
.father{
    width300px;
    height: 300px;
    background-color: pink;
}

.son {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-top: 50px;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>

解决方法; 1.取消子级margin, 父级设置padding

2.父级设置overflow:hidden

3.父级设置border-top