• margin塌陷和margin重合问题的解决方法总结

    目录

    父子元素之间的margin塌陷问题

    现象

    解决方法：

    方法一：设置子元素浮动元素

    ​编辑

    方法二：父元素设置浮动元素

    方法三：父元素设置行内块元素

     方法四：父元素设置绝对定位

    方法五：给父元素设置overflow: hidden 

    方法六：为父元素设置一个before伪元素

    方法七：在子元素前添加一个空白元素

    ​编辑

    兄弟元素之间的margin重叠问题

    现象

    解决方法：

    方法一：给子元素2设置成浮动元素

    方法二：给子元素2设置display: inline-block

     方法三：在兄弟元素之间添加一个空白div

    ​编辑 方法四：给其中一个子元素添加一个父元素，将子元素的margin值修改为父元素的pading值

    方法五：给第二个子元素添加一个父元素，并通过BFC解决问题

    方法六：父元素设置display：flex

    margin塌陷和margin重叠都是垂直方向上的，水平方向没有这些问题。

    父子元素之间的margin塌陷问题

    现象

    1. <template>
    2.   <div>
    3.     <div class="title-wrap">不设置margin-top值</div>
    4.     <div class="parent-wrap">
    5.       <div class="child-wrap"></div>
    6.     </div>
    7.     <div class="title-wrap">设置margin-top值</div>
    8.     <div class="parent-wrap">
    9.       <div class="child2-wrap" ></div>
    10.     </div>
    11.   </div>
    12. </template>
    13. <script>
    14. export default {
    15.   name: "MarginDemo",
    16. };
    17. </script>
    18. <style scoped>
    19. .title-wrap {
    20.   width: 300px;
    21.   border: 1px solid gray;
    22.   padding: 5px 0;
    23. }
    24. .parent-wrap {
    25.   background-color: aqua;
    26.   width: 100px;
    27.   height: 100px;
    28. }
    29. .child-wrap {
    30.   width: 50px;
    31.   height: 50px;
    32.   background-color: blueviolet;
    33. }
    34. .child2-wrap {
    35.   width: 50px;
    36.   height: 50px;
    37.   background-color: blueviolet;
    38.   margin-top: 20px;
    39. }
    40. </style>

    0669e192b0ca4d46ac1cb7f0baa84de3.png

     不对子元素设置margin-top时，父子元素都和title元素的底部边框线对齐，但是当我对子元素设置margin-top时（本意只想影响子元素），父子元素一起向下移动，都有了一定的间距。这种现象就是margin塌陷。

    解决方法：

    注意以下解决方法可能会引起副作用，所以在使用时应该根据实际情况进行选择。

    方法一：设置子元素浮动元素

    1. .child2-wrap {
    2.   width: 50px;
    3.   height: 50px;
    4.   background-color: blueviolet;
    5.   margin-top: 20px;
    6.   float: left;
    7. }

    645fcbc7d5794d049ed22ae9a6650320.png

    方法二：父元素设置浮动元素

    1. <template>
    2.   <div class="container-wrap">
    3.     <div class="parent-wrap">
    4.       <div class="child2-wrap"></div>
    5.     </div>
    6.   </div>
    7. </template>
    8. <script>
    9. export default {
    10.   name: "MarginDemo",
    11. };
    12. </script>
    13. <style scoped>
    14. .container-wrap {
    15.   margin-left: 10px;
    16. }
    17. .parent-wrap {
    18.   background-color: aqua;
    19.   width: 100px;
    20.   height: 100px;
    21.   float: left;
    22. }
    23.  
    24. .child2-wrap {
    25.   width: 50px;
    26.   height: 50px;
    27.   background-color: blueviolet;
    28.   margin-top: 20px;
    29. }
    30. </style>

    88a7b00b6b7547e089ba39bc771b44d7.png

    方法三：父元素设置行内块元素

    1. .parent-wrap {
    2.   background-color: aqua;
    3.   width: 100px;
    4.   height: 100px;
    5.   display:inline-block;
    6. }

    317914f869034eaf9ebc5c11dcafd593.png

     方法四：父元素设置绝对定位

    1. <template>
    2.   <div class="container-wrap">
    3.     <div class="parent-wrap">
    4.       <div class="child2-wrap"></div>
    5.     </div>
    6.   </div>
    7. </template>
    8. <script>
    9. export default {
    10.   name: "MarginDemo",
    11. };
    12. </script>
    13. <style scoped>
    14. .container-wrap {
    15.   margin-left: 10px;
    16. }
    17. .parent-wrap {
    18.   background-color: aqua;
    19.   width: 100px;
    20.   height: 100px;
    21.   position: absolute;
    22. }
    23.  
    24. .child2-wrap {
    25.   width: 50px;
    26.   height: 50px;
    27.   background-color: blueviolet;
    28.   margin-top: 20px;
    29. }
    30. </style>

    9cf8dbd859cd4f9185d5a5b60942bc8c.png

    方法五：给父元素设置overflow: hidden 

    1. <template>
    2.   <div class="container-wrap">
    3.     <div class="parent-wrap">
    4.       <div class="child2-wrap"></div>
    5.     </div>
    6.   </div>
    7. </template>
    8. <script>
    9. export default {
    10.   name: "MarginDemo",
    11. };
    12. </script>
    13. <style scoped>
    14. .container-wrap {
    15.   margin-left: 10px;
    16. }
    17. .parent-wrap {
    18.   background-color: aqua;
    19.   width: 100px;
    20.   height: 100px;
    21.   overflow: hidden;
    22. }
    23.  
    24. .child2-wrap {
    25.   width: 50px;
    26.   height: 50px;
    27.   background-color: blueviolet;
    28.   margin-top: 20px;
    29. }
    30. </style>

     e3dc975e92194653a233d2fcc83f038c.png

    方法六：为父元素设置一个before伪元素

    1. .parent-wrap::before{
    2.     display: table;
    3.     content: '';
    4. }

     36fe4088dcc24a6898ca2f8366621a44.png

    方法七：在子元素前添加一个空白元素

    1. <template>
    2.   <div class="container-wrap">
    3.     <div class="parent-wrap">
    4.       <!-- 空白元素 -->
    5.       <div class="space-wrap"></div>
    6.       <div class="child2-wrap"></div>
    7.     </div>
    8.   </div>
    9. </template>
    10. <script>
    11. export default {
    12.   name: "MarginDemo",
    13. };
    14. </script>
    15. <style scoped>
    16. .container-wrap {
    17.   margin-left: 10px;
    18. }
    19. .parent-wrap {
    20.   background-color: aqua;
    21.   width: 100px;
    22.   height: 100px;
    23. }
    24.  
    25. .child2-wrap {
    26.   width: 50px;
    27.   height: 50px;
    28.   background-color: blueviolet;
    29.   margin-top: 19px;
    30. }
    31. /* 本意设置margin-top是20px，现在通过margin-top的19px和空白元素的height的1px实现20px的空白*/
    32. .space-wrap {
    33.   width: 100%;
    34.   height: 1px;
    35. }
    36. </style>

    85444494ae674c51a73d9912ff98b9e8.png

    兄弟元素之间的margin重叠问题

    现象

    1. <template>
    2.   <div class="container-wrap">
    3.     <div class="child1-wrap"></div>
    4.     <div class="child2-wrap"></div>
    5.   </div>
    6. </template>
    7. <script>
    8. export default {
    9.   name: "MarginDemo",
    10. };
    11. </script>
    12. <style scoped>
    13. .container-wrap {
    14.   margin-left: 10px;
    15.   width: 110px;
    16.   height: 500px;
    17.   border: 1px solid gray;
    18. }
    19. .child1-wrap {
    20.   width: 100px;
    21.   height: 100px;
    22.   background-color: aqua;
    23.   margin-bottom: 200px;
    24. }
    25. .child2-wrap {
    26.   width: 100px;
    27.   height: 100px;
    28.   background-color: blue;
    29.   margin-top: 100px;
    30. }
    31. </style>

    cbbd64f43e124661a0bd5e2c8a71f61d.png

     给子元素1设置了margin-bottom: 200px，给子元素2设置了margin-top: 100px，按理来说应该两个子元素上下间隔应该是300px，但是实际两个子元素的上下间隔只有200px。

    这种兄弟元素垂直外边距重合，选取兄弟元素中设置的margin的最大值的现象就是margin重合。

    解决方法：

    方法一：给子元素2设置成浮动元素

    1. .child2-wrap {
    2.   width: 100px;
    3.   height: 100px;
    4.   background-color: blue;
    5.   margin-top: 100px;
    6.   float: left;
    7. }

    9fe42116ea1744fda1c2b3cc6bbb4e21.png

    方法二：给子元素2设置display: inline-block

    1. .child2-wrap {
    2.   width: 100px;
    3.   height: 100px;
    4.   background-color: blue;
    5.   margin-top: 100px;
    6.   display: inline-block;
    7. }

    71a930e27b424d11a92e18613ec4bc41.png

     方法三：在兄弟元素之间添加一个空白div

    1. <template>
    2.   <div class="container-wrap">
    3.     <div class="child1-wrap"></div>
    4.     <div class="space-wrap"></div>
    5.     <div class="child2-wrap"></div>
    6.   </div>
    7. </template>
    8. <script>
    9. export default {
    10.   name: "MarginDemo",
    11. };
    12. </script>
    13. <style scoped>
    14. .container-wrap {
    15.   margin-left: 10px;
    16.   width: 110px;
    17.   height: 500px;
    18.   border: 1px solid gray;
    19. }
    20. .child1-wrap {
    21.   width: 100px;
    22.   height: 100px;
    23.   background-color: aqua;
    24.   margin-bottom: 200px;
    25. }
    26. .child2-wrap {
    27.   width: 100px;
    28.   height: 100px;
    29.   background-color: blue;
    30.   margin-top: 99px;
    31. }
    32.  
    33. .space-wrap {
    34.   width: 100%;
    35.   height: 1px;
    36. }
    37. </style>

    d33a0e0e0b7b45b38460db1ba4ee75d0.png 方法四：给其中一个子元素添加一个父元素，将子元素的margin值修改为父元素的pading值

    1. <template>
    2.   <div class="container-wrap">
    3.     <div class="child1-wrap"></div>
    4.     <div class="parent2-wrap">
    5.       <div class="child2-wrap"></div>
    6.     </div>
    7.   </div>
    8. </template>
    9. <script>
    10. export default {
    11.   name: "MarginDemo",
    12. };
    13. </script>
    14. <style scoped>
    15. .container-wrap {
    16.   margin-left: 10px;
    17.   width: 110px;
    18.   height: 500px;
    19.   border: 1px solid gray;
    20. }
    21. .child1-wrap {
    22.   width: 100px;
    23.   height: 100px;
    24.   background-color: aqua;
    25.   margin-bottom: 200px;
    26. }
    27. .parent2-wrap {
    28.   padding-top: 100px;
    29. }
    30. .child2-wrap {
    31.   width: 100px;
    32.   height: 100px;
    33.   background-color: blue;
    34. }
    35. </style>

    3ea1edaaecd341648d3228deb31f9ae4.png

    方法五：给第二个子元素添加一个父元素，并通过BFC解决问题

    给第二个子元素的父元素添加以下属性都可以解决问题：

    1、  float: left;

    2、  display: inline-block;

    3、 overflow: hidden;

    4、position: absolute;

    方法六：父元素设置display：flex

    1. .container-wrap {
    2.   margin-left: 10px;
    3.   width: 110px;
    4.   height: 500px;
    5.   border: 1px solid gray;
    6.   display: flex;
    7.   flex-direction: column;
    8. }

    2750584cb669473797d8a756ec1c28e8.png

  • 相关阅读:
    【Java第31期】：Spring中存储Bean的注解以及用法
    数据库知识点
    【网络技术】心跳机制（入门讲解）
    自动驾驶算法详解(7)：特斯拉Tesla决策规划算法Planning解析上
    二维数组与二级指针是好朋友吗？
    MybatisPlus的操作
    idea添加文档注释
    【ijkplayer】整体结构总结（一）
    单片机论文参考：2、基于单片机的病床呼叫系统设计
    【最全最详细Docker】用docker部署mysql、tomcat、nginx、redis 环境部署
  • 原文地址：https://blog.csdn.net/Celester_best/article/details/127455732