垂直外边距的重叠

时间：2021-07-05 18:59:08 收藏：0 阅读：0

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                width: 100px;
                height: 100px;
                background-color:red ;
                
                margin-bottom:100px ;
            }
            /*
                垂直外边距的重叠
                    在网页中相邻垂直方向的相邻外边距会发生外边距的重叠
                    外边距的重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
                    
                    如果父子元素的垂直外边距相邻，则子元素外边距设置给父元素
            */
            .box2{
                width: 100px;
                height: 100px;
                background-color: green;
                margin-top:100px ;
            }
            
            .box3{
               width: 200px;
               height: 100px;
               background-color: yellow;
               /*box3设置上边框*/
               /* 
                  border-top:1px red solid ; 
                  使用padding注意内容区可见框不变，在height处减去
               */
               padding-top: 100px;
                 
            }
            .box4{
                width: 100px;
                height: 100px;
                background-color: green;
                
                /*
                为子元素设置上边距，使子元素向下移动
                */
               /* margin-top: 100px; */
            }
        </style>
    </head>
    <body>
        <div class="box3">
            <div class="box4"></div>
        </div>
        
        <div class="box1"></div>
        <div class="box2"></div>
    </body>
</html>

垂直外边距的重叠

　　网页中相邻垂直方向的外边距会发生重叠

　　外边距重叠指兄弟元素之间相邻外边距会取最大值而不是和

　　如果父子元素的垂直外边距相邻，则子元素外边距设置给父元素

　　使用padding注意要使内容区可见框不变，要在height减去