css 外边距塌陷问题

两个块级元素嵌套，如果里面的元素没有设置border 属性，在内层的 元素使用margin 时会把父元素节点 也会跟着移动， 故外边距塌陷问题，

解决方法 ，可以给父元素添加border ，或者给父元素 添加一个属性  overflow: hidden;的属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 500px;
            height: 500px;
            border: 1px dashed red;
            /* background-color:yellowgreen; */
            /* overflow: hidden; */
        }
        .two{
            width: 300px;
            height: 300px;
            /* border: 1px dashed black; */
            background-color: darkgoldenrod;
            margin: 50px 50px;
        }
    </style>
</head>

<body>
    <div class="one">
        <div class="two"></div>
    </div>


</body>

</html>

 

posted on 2022-09-26 10:51  totau  阅读(48)  评论(0)  编辑  收藏  举报

导航