CSS学习笔记(一)-11.盒子模型-嵌套盒子外边距的塌陷
嵌套盒子,希望内部盒子与外部盒子之间有一个间隔距离。
1.内部盒子使用margin-top,变换的却是2个盒子一起变动。原因后续补充。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 12:48:08 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-13 12:53:56 7 * @Description: 8 * @FilePath: \css\嵌套块元素存执外边距的塌陷.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>嵌套块元素存执外边距的塌陷</title> 18 <style> 19 .father { 20 width: 400px; 21 height: 400px; 22 background-color: pink; 23 } 24 25 .son { 26 width: 200px; 27 height: 200px; 28 background-color: blue; 29 margin-top: 50px; 30 } 31 </style> 32 </head> 33 34 <body> 35 <div class='father'> 36 <div class='son'></div> 37 </div> 38 </body> 39 40 </html>
演示图如下:
2.如果父级盒子也设置呢?效果相同。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 12:48:08 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-13 12:58:25 7 * @Description: 8 * @FilePath: \css\嵌套块元素存执外边距的塌陷.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>嵌套块元素存执外边距的塌陷</title> 18 <style> 19 .father { 20 width: 400px; 21 height: 400px; 22 background-color: pink; 23 margin-top: 60px; 24 } 25 26 .son { 27 width: 200px; 28 height: 200px; 29 background-color: blue; 30 margin-top: 50px; 31 } 32 </style> 33 </head> 34 35 <body> 36 <div class='father'> 37 <div class='son'></div> 38 </div> 39 </body> 40 41 </html>
要解决这个问题的方法有一下三种:
1.为父元素定义一个上边框
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 12:48:08 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-13 13:01:40 7 * @Description: 8 * @FilePath: \css\嵌套块元素存执外边距的塌陷.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>嵌套块元素存执外边距的塌陷</title> 18 <style> 19 .father { 20 width: 400px; 21 height: 400px; 22 background-color: pink; 23 margin-top: 30px; 24 border-top: 1px solid transparent; 25 } 26 27 .son { 28 width: 200px; 29 height: 200px; 30 background-color: blue; 31 margin-top: 50px; 32 } 33 </style> 34 </head> 35 36 <body> 37 <div class='father'> 38 <div class='son'></div> 39 </div> 40 </body> 41 42 </html>
2.为父元素定义上内边距
padding: 1px;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 12:48:08 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-13 13:05:01 7 * @Description: 8 * @FilePath: \css\嵌套块元素存执外边距的塌陷.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>嵌套块元素存执外边距的塌陷</title> 18 <style> 19 .father { 20 width: 400px; 21 height: 400px; 22 background-color: pink; 23 margin-top: 30px; 24 /* border-top: 1px solid transparent; 25 */ 26 padding: 1px; 27 } 28 29 .son { 30 width: 200px; 31 height: 200px; 32 background-color: blue; 33 margin-top: 50px; 34 } 35 </style> 36 </head> 37 38 <body> 39 <div class='father'> 40 <div class='son'></div> 41 </div> 42 </body> 43 44 </html>
3.为父元素添加overflow:hidden.
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 12:48:08 5 * @LastEditors: invoker 6 * @LastEditTime: 2021-07-13 13:06:17 7 * @Description: 8 * @FilePath: \css\嵌套块元素存执外边距的塌陷.html 9 --> 10 <!DOCTYPE html> 11 <html lang="en"> 12 13 <head> 14 <meta charset="UTF-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 17 <title>嵌套块元素存执外边距的塌陷</title> 18 <style> 19 .father { 20 width: 400px; 21 height: 400px; 22 background-color: pink; 23 margin-top: 30px; 24 /* border-top: 1px solid transparent; 25 */ 26 /* padding: 1px; 27 */ 28 overflow: hidden; 29 } 30 31 .son { 32 width: 200px; 33 height: 200px; 34 background-color: blue; 35 margin-top: 50px; 36 } 37 </style> 38 </head> 39 40 <body> 41 <div class='father'> 42 <div class='son'></div> 43 </div> 44 </body> 45 46 </html>
其他方法:浮动,固定,绝对定位的盒子不会有塌陷问题。
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/15005965.html