盒子模型（框模型）——外边距 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>盒子模型（框模型）——外边距</title>
        <style type="text/css">
            /* 
                外边距
                    当前盒子和其他盒子之间的距离称为外边框，外边框不会影响盒子的可见框大小
                    但外边距会影响到盒子实际占地的大小，影响盒子的位置
                    由于在浏览器中默认情况下，元素是靠左上排列的，所以设置左外边距时，会移动元素
                        自身，而设置下和右外边距时，会移动其他的元素
                    简写属性
                        margin可以同时设置四个方向的外边距
             */
            .box{
                width: 700px;
                height: 700px;
                border: 2px red solid;
            }
            
            .box1{
                width: 200px;
                height: 200px;
                border: solid yellow;
                margin: 10px 20px;
            }
            
            .box2{
                width: 300px;
                height: 300px;
                border: solid;
                margin: 50px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
    </body>
</html>

 

posted @ 2022-05-09 14:02  氯丙嗪  阅读(41)  评论(0)    收藏  举报