.box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 10px orange solid;
            /* 
                内边距（padding）
                    - 内容区和边框之间的距离是内边距
                    - 一共有四个方向的内边距
                        padding-top
                        padding-right
                        padding-bottom
                        padding-left

                    - 内边距的设置会影响到盒子的大小
                    - 背景颜色会延伸到内边距上

                一共盒子的可见框的大小，由内容区 内边距和边框共同决定，
                    所以在计算盒子大小时，需要将这三个区域加到一起计算
            */
            padding-top:100px;
            padding-right: 100px;
            padding-bottom: 100px;
            padding-left: 100px;
            /* 
                padding 内边距的简写属性，可以同时指定四个方向的内边距
                    规则和border-width 一样
            */
            padding: 10px 20px 30px 40px;
            padding: 10px 20px 30px;
        }
.box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 10px red solid;

            /* 
                外边距（maigin）
                    - 外边距不会影响盒子可见框的大小
                    - 但是外边距会影响到盒子的位置
                    - 一共有四个方向的外边框
                        margin-top 上
                            - 上外边框，设置一个正值，元素会向下移动
                        margin-right 右
                        margin-bottom 下
                            - 下外边框，设置一个正值，其下边的元素会向下移动
                        margin-left 左
                            - 左外边距，设置一个正值，元素会向右移动

                    - margin 也可以设置负值，如果是负值则元素会向相反的方向移动
                        
                    - 元素在页面中是按照自左向右的顺序排列的，
                        所以默认情况下如果我们设置的左和上外边距则会移动元素自身
                        而设置下和右外边距会移动其他元素

                    - margin的简写属性
                        margin 可以同时设置四个方向的外边距，用法和padding一样
            */
            /* margin-top: 100px;
            margin-left: 100px;
            margin-bottom: 100px; */
        }
.inner{
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 
                元素的水平方向的布局：
                    元素在其父元素中水平方向的位置由以下几个属性共同决定
                        margin-left
                        border-left
                        padding-left
                        width
                        padding-right
                        border-right
                        margin-right
                    相加等于 其父元素内容区的宽度(必须满足)
            */
        }