外边距 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                width: 200px;
                height: 200px;
                background-color: #BBFFAA;
                /* border: 10px solid red; */
                /*
                    外边距指的是盒子与其他盒子之间的距离
                    他不会影响可见框的大小，而是会影响到盒子的位置
                    盒子有四个方向的外边距
                        margin-top
                        margin-right
                        margin-bottom
                        margin-left
                        
                        由于页面中的元素都是靠左靠上摆放
                            所以注意党文门设置上和左外边距时，会导致盒子自身发生改变 
                            若设置右和下外边距，会导致其它盒子位置发生改变 
                */
            /*   margin-top: 50px;
               margin-left: 100px; */
               
               /*
                    外边距也可以设置负值
                        若设置负值，则元素向反方向移动
               */
               /* margin-left: 100px; */
               
               /*
                    margin还可以设置为auto，auto一般只设置给水平方向
                        若只指定左外边距或右外边距的margin为auto则会将外边距设置为最大
                        将left right同时设置auto，使元素在父元素中居中，使子元素在父元素中
                        居中
                        
                        外边距同样可以使用简写，规则和padding一样
               */
               margin: 0 auto;
              
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: #9ACD32;
            }
            
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
    </body>
</html>

外边距指的是盒子与其它盒子之间的距离

margin 还可以设置为auto，auto一般只设置给水平方向只指定左或右外边距的margin为auto时则会将外边距设置为最大，将left right同时设置auto，使元素在父元素中居中

外边距也可简写规则和padding一样

margin：0 auto；

posted @ 2021-07-03 20:22  2237774566  阅读(46)  评论(0)    收藏  举报