<!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{
                height: 50px;
                width: 100px;
                background-color: #00FFFF;
                /* 
                    解决外边距重叠
                 */
                padding-top: 1px;
                
                /* 
                    第二种方式
                 */
                border-top: 1px red solid;
                
                /*
                    第三种方式
                 */
                padding-top: 50px;
            }
            
            .box4{
                
                
                height: 50px;
                width: 50px;
                background-color: #0000FF;
            }
        </style>
    </head>
    <body>
        <div class="box3">

            <div class="box4">
                
            </div>
        </div>
        
        <div class="box1">
            
        </div>
        
        <div class="box2">
            
        </div>
    </body>
</html>
posted on 2021-06-30 19:41 leiyanting 阅读(56) 评论(0) 收藏举报
刷新页面返回顶部
导航
