devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

css解决外边距塌陷的7种方法_css外边距塌陷

作者：凡人多烦事01 | 2024-02-22 06:42:55

赞

踩

css外边距塌陷

目录

什么是外边距塌陷:

解决方法

1，给父元素加边框

2，给父元素设置padding挤下去

 3，给父元素设置溢出隐藏，触发bfc机制：bfc全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素。

4， 给父元素或者子元素增加浮动，让其脱离标准流

5，将父元素转变为行内块元素，display：inline-block 

6，给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位

7，给父元素增加flex或者inline-flex 

什么是外边距塌陷:

  • 外边距合并也叫作外边距塌陷,当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是外边距塌陷的现象

例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .father {
  10.             width: 500px;
  11.             height: 500px;
  12.             background-color: red;
  13.             margin: 0 auto;
  14.         }
  15.         .box {
  16.             width: 200px;
  17.             height: 200px;
  18.             background-color: teal;
  19.             /* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
  20.             margin-top: 100px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="father">
  26.         <div class="box">
  27.             
  28.         </div>
  29.     </div>
  30. </body>
  31. </html>

解决方法

1，给父元素加边框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .father {
  10.             width: 500px;
  11.             height: 500px;
  12.             background-color: red;
  13.             margin: 0 auto;
  14.             /* 给父元素设置边框 */
  15.             /* border: 1px solid red; */
  16.             /* 或者 以下这种方式给父元素加边框但是不显示线*/
  17.             border: 1px solid transparent;
  18.         }
  19.         .box {
  20.             width: 200px;
  21.             height: 200px;
  22.             background-color: teal;
  23.             /* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
  24.             margin-top: 100px;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="father">
  30.         <div class="box">
  31.             
  32.         </div>
  33.     </div>
  34. </body>
  35. </html>

2，给父元素设置padding挤下去

  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.         .father {
  11.             width: 500px;
  12.             height: 500px;
  13.             background-color: red;
  14.             margin: 0 auto;
  15.             /* 设置padding挤下去 */
  16.             /* 设置padding值后要加边框盒子不然会撑开盒子 */
  17.             box-sizing: border-box;
  18.             padding-top: 100px;
  19.         }
  20.  
  21.         .box {
  22.             width: 200px;
  23.             height: 200px;
  24.             background-color: teal;
  25.             /* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
  26.             /* margin-top: 100px; */
  27.         }
  28.     </style>
  29. </head>
  30.  
  31. <body>
  32.     <div class="father">
  33.         <div class="box">
  34.  
  35.         </div>
  36.     </div>
  37. </body>
  38.  
  39. </html>

 

 3，给父元素设置溢出隐藏，触发bfc机制：bfc全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素。

  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.         .father {
  11.             width: 500px;
  12.             height: 500px;
  13.             background-color: red;
  14.             margin: 0 auto;
  15.             /* 给父元素设置溢出隐藏触发bfc机制 */
  16.             overflow: hidden;
  17.         }
  18.  
  19.         .box {
  20.             width: 200px;
  21.             height: 200px;
  22.             background-color: teal;
  23.             /* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
  24.             margin-top: 100px;
  25.         }
  26.     </style>
  27. </head>
  28.  
  29. <body>
  30.     <div class="father">
  31.         <div class="box">
  32.  
  33.         </div>
  34.     </div>
  35. </body>
  36.  
  37. </html>

4， 给父元素或者子元素增加浮动，让其脱离标准流

  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.         .father {
  11.             width: 500px;
  12.             height: 500px;
  13.             background-color: red;
  14.             margin: 0 auto;
  15.             /* 给父元素或者子元素设置浮动*/
  16.             /* float: left; */
  17.         }
  18.  
  19.         .box {
  20.             width: 200px;
  21.             height: 200px;
  22.             background-color: teal;
  23.             /* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
  24.             margin-top: 100px;
  25.             float: left;
  26.         }
  27.     </style>
  28. </head>
  29.  
  30. <body>
  31.     <div class="father">
  32.         <div class="box">
  33.  
  34.         </div>
  35.     </div>
  36. </body>
  37.  
  38. </html>

5，将父元素转变为行内块元素，display：inline-block 

  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.         .father {
  11.             width: 500px;
  12.             height: 500px;
  13.             background-color: red;
  14.             margin: 0 auto;
  15.             /* 转换为行内块 */
  16.             display: inline-block;
  17.         }
  18.  
  19.         .box {
  20.             width: 200px;
  21.             height: 200px;
  22.             background-color: teal;
  23.             margin-top: 100px;
  24.         }
  25.     </style>
  26. </head>
  27.  
  28. <body>
  29.     <div class="father">
  30.         <div class="box">
  31.  
  32.         </div>
  33.     </div>
  34. </body>
  35.  
  36. </html>

6，给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位

  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.         .father {
  11.             width: 500px;
  12.             height: 500px;
  13.             background-color: red;
  14.             margin: 0 auto;
  15.             /* 给父元素或者子元素绝对定位或者固定定位 */
  16.             /* position: absolute; */
  17.         }
  18.  
  19.         .box {
  20.               /* 给父元素或者子元素绝对定位或者固定定位 */
  21.             position: fixed;
  22.             width: 200px;
  23.             height: 200px;
  24.             background-color: teal;
  25.             margin-top: 100px;
  26.         }
  27.     </style>
  28. </head>
  29.  
  30. <body>
  31.     <div class="father">
  32.         <div class="box">
  33.  
  34.         </div>
  35.     </div>
  36. </body>
  37.  
  38. </html>

7，给父元素增加flex或者inline-flex 

  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.         .father {
  11.             width: 500px;
  12.             height: 500px;
  13.             background-color: red;
  14.             margin: 0 auto;
  15.             /* 给父元素增加flex或者inline-flex  */
  16.             display: flex;
  17.             /* display: inline-flex; */
  18.         }
  19.  
  20.         .box {
  21.             width: 200px;
  22.             height: 200px;
  23.             background-color: teal;
  24.             margin-top: 100px;
  25.         }
  26.     </style>
  27. </head>
  28.  
  29. <body>
  30.     <div class="father">
  31.         <div class="box">
  32.  
  33.         </div>
  34.     </div>
  35. </body>
  36.  
  37. </html>

 

 

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

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

  

闽ICP备14008679号