Margin塌陷

Margin 塌陷问题

<!doctype html>

<html>
<head>
	<style type="text/css">
        *{
            margin: 0; 
            padding: 0; 
        }
        .box {
            background: #f5f5f5;
            overflow: hidden;
        }
        .box1 {
            width:200px;
            height:200px;
            margin: 20px;
            background: #0ff;
        }

		.box2 {
            width:400px;
            height:400px;
            background: #f40;
            }
    </style>
</head>
<body style="margin: 60px">
    <div class="box">
        <div class="box1">
            box1
            <div class="box2">box2</div>
        </div>
    </div>
    </body>
</html>

想要得到的效果

实际的结果

解决方法

  1. 在父级盒子加border属性使box3不再与box4贴合.

  2. 为父级盒子添加下列属性之一
    overflow:hidden;
    position:absolute;
    float:left;
    display:inline-block;

  3. 为父级盒子设定padding值.

posted @ 2020-08-03 21:09  alohaplat  阅读(63)  评论(0)    收藏  举报