devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS外边距合并（塌陷）和解决方法_css margin塌陷

作者：小小林熬夜学编程 | 2024-02-22 06:45:11

赞

踩

css margin塌陷

目录

1.现象：

2.相邻块元素外边距合并（塌陷）的表现：

3.嵌套块元素外边距合并（塌陷）的表现：

1.现象：

CSS中使用外边距margin定义块元素的垂直外边距会产生外边距合并（塌陷）

2.相邻块元素外边距合并（塌陷）的表现：

e.g.

a.上下两个相邻块元素，如上面块元素有下外边距margin-bottom，下面的块元素有上外边距margin-top

b.他们之间的外边距不是两个margin-bottom和margin-bottom的和，而是两个值中较大的那个值。

e.g.

上面的盒子box1的margin-bottom：10px;下面的盒子box2的margin-top:20px;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.  
  15.         .box1 {
  16.             width: 200px;
  17.             height: 100px;
  18.             background-color: pink;
  19.             margin-bottom: 10px;
  20.  
  21.  
  22.         }
  23.  
  24.         .box2 {
  25.             width: 200px;
  26.             height: 100px;
  27.             background-color: blue;
  28.             margin-top: 20px;
  29.         }
  30.     </style>
  31. </head>
  32.  
  33. <body>
  34.     <div class="box1"></div>
  35.     <div class="box2"></div>
  36. </body>
  37.  
  38. </html>

得到的结果是，整体height:220px;所以他们之间的margin取的是20px;（即是两者之间数值较大的margin-top)

解决方法：尽量只给相邻盒子中的一个盒子加margin值

3.嵌套块元素外边距合并（塌陷）的表现：

e.g.

a.有嵌套关系的两个块元素，如父级盒子无上内边距padding-top和边框border,且父级盒子和子级盒子都有上外边距margin-top

b.他们共同的上外边距margin-top是两个值中较大的那个值。

e.g,

父盒子box1的width:300px;height:200px;margin-top: 10px;粉色

子盒子box2的width:200px;height:100px;margin-top: 20px;蓝色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.  
  15.         .box1 {
  16.             width: 300px;
  17.             height: 200px;
  18.             background-color: pink;
  19.             margin-top: 10px;
  20.  
  21.  
  22.         }
  23.  
  24.         .box2 {
  25.             width: 200px;
  26.             height: 100px;
  27.             background-color: blue;
  28.             margin-top: 20px;
  29.         }
  30.     </style>
  31. </head>
  32.  
  33. <body>
  34.     <div class="box1">
  35.         <div class="box2"></div>
  36.     </div>
  37.  
  38. </body>
  39.  
  40. </html>

得到的结果是整体height:220px;所以他们总体的margin-top取的是20px;（即是margin-top和margin-bottom中两者之间数值较大的margin-top)

 解决方法1：给父元素加一个边框border（border-top),这样子元素加margin-top是从父元素的上边框开始算的

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.  
  15.         .box1 {
  16.             width: 300px;
  17.             height: 200px;
  18.             background-color: pink;
  19.             border: 1px solid black;
  20.             margin-top: 10px;
  21.  
  22.         }
  23.  
  24.         .box2 {
  25.             width: 200px;
  26.             height: 100px;
  27.             background-color: blue;
  28.             margin-top: 20px;
  29.         }
  30.     </style>
  31. </head>
  32.  
  33. <body>
  34.     <div class="box1">
  35.         <div class="box2"></div>
  36.     </div>
  37.  
  38. </body>
  39.  
  40. </html>

坏处：父盒子由于加了边框改变了大小

解决方法2：给父元素加一个上内边框padding-top,这样子元素加margin-top是从父元素的上边框开始算的

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.  
  15.         .box1 {
  16.             width: 300px;
  17.             height: 200px;
  18.             background-color: pink;
  19.             padding-top: 1px;
  20.             margin-top: 10px;
  21.  
  22.         }
  23.  
  24.         .box2 {
  25.             width: 200px;
  26.             height: 100px;
  27.             background-color: blue;
  28.             margin-top: 20px;
  29.         }
  30.     </style>
  31. </head>
  32.  
  33. <body>
  34.     <div class="box1">
  35.         <div class="box2"></div>
  36.     </div>
  37.  
  38. </body>
  39.  
  40. </html>

 坏处：父盒子由于加了padding-top也改变了大小

解决方法3：给父元素加overflow:hidden溢出隐藏,这样子元素加margin-top是从父元素的上边框开始算的（最常用，因为不会改变盒子大小）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.  
  15.         .box1 {
  16.             width: 300px;
  17.             height: 200px;
  18.             background-color: pink;
  19.             overflow: hidden;
  20.             margin-top: 10px;
  21.  
  22.         }
  23.  
  24.         .box2 {
  25.             width: 200px;
  26.             height: 100px;
  27.             background-color: blue;
  28.             margin-top: 20px;
  29.         }
  30.     </style>
  31. </head>
  32.  
  33. <body>
  34.     <div class="box1">
  35.         <div class="box2"></div>
  36.     </div>
  37.  
  38. </body>
  39.  
  40. </html>

父盒子大小没有改变

解决方法4：给父元素加浮动,这样子元素加margin-top是从父元素的上边框开始算的（也不会改变父大小）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.  
  15.         .box1 {
  16.             width: 300px;
  17.             height: 200px;
  18.             background-color: pink;
  19.             float: left;
  20.             margin-top: 10px;
  21.  
  22.         }
  23.  
  24.         .box2 {
  25.             width: 200px;
  26.             height: 100px;
  27.             background-color: blue;
  28.             margin-top: 20px;
  29.         }
  30.     </style>
  31. </head>
  32.  
  33. <body>
  34.     <div class="box1">
  35.         <div class="box2"></div>
  36.     </div>
  37.  
  38. </body>
  39.  
  40. </html>

 结果与方法3同，就不贴图了

解决方法5：给子元素转换为行内块元素（display: inline-block;）,这样子元素加margin-top是从父元素的上边框开始算的（也不会改变父大小）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.  
  15.         .box1 {
  16.             width: 300px;
  17.             height: 200px;
  18.             background-color: pink;
  19.             float: left;
  20.             margin-top: 10px;
  21.  
  22.         }
  23.  
  24.         .box2 {
  25.             width: 200px;
  26.             height: 100px;
  27.             background-color: blue;
  28.             margin-top: 20px;
  29.             display: inline-block;
  30.         }
  31.     </style>
  32. </head>
  33.  
  34. <body>
  35.     <div class="box1">
  36.         <div class="box2"></div>
  37.     </div>
  38.  
  39. </body>
  40.  
  41. </html>

结果也与方法3同，也就不贴图了

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/128936
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号