前端学习日记：内边距与外边距

朱雀 2023-06-06 08:19 213阅读 0赞

外边距：  
                同时定义四个外边距：顺序为上右下左（顺时针）  
                margin 20px 30px 40px;  
            \*/

/\*  
                外边距合并原则：（发生于两个相邻元素之间）  
                    在垂直方向上当相邻两个元素之间定义了外边距  
                    （如：box1的下边距和box2的上边距），则会合并；  
                    最终取值为外边距较大者（即两元素的距离变为50px）  
            \*/  
            .box1\{  
                width: 600px;  
                height: 200px;  
                margin: 0 0 50px 0;  
                background-color: red;  
            \}  
            .box2\{  
                width: 600px;  
                height: 100px;  
                margin: 10px 0 0 0;  
                background-color: yellow;  
            \}

/\*  
                外边距塌陷：（发生于两个嵌套元素之间）  
                    在垂直方向上的子元素设定了外边距时，会连带父元素一齐起作用，（如：子元素的margin-top外边距为20px；则父子元素会一齐往下走50px）

解法：  
                        1.（不推荐）  
                        给父元素设置边框border: 1px solid \#232323;  
                        （注意：设定了边框后父盒子的大小会随之改变）  
                        2.（推荐）  
                        给父元素设定属性：overflow:hidden;  
            \*/  
            .father\{  
                /\*  
                在border: 1px solid \#232323;时，  
                width: 498px;  
                height: 398px;  
                以防止盒子总大小发生改变  
                \*/  
                width: 500px;  
                height: 400px;  
                /\*margin: 0 0 50px 0;\*/  
                background-color: \#232323;  
                /\*border: 1px solid \#232323;\*/  
                overflow: hidden;  
            \}  
            .son\{  
                width: 200px;  
                height: 200px;  
                /\*margin: 10px 0 0 0;\*/  
                background-color: \#eee;  
                margin-top: 50px;  
            \}  
        </style>