写代码啦
关于margin塌陷
回复数(0) 浏览数(38)
{{topic.upvote_count || 0}} 编辑 回复

Margin塌陷

先来说下什么是margin塌陷,就是在文档流中,竖直方向的margin会出现合并(叠加),值较大的会覆盖住值较小的,

昨天晚上和群里小伙伴,讨论了一个问题:

下图代码连接

就是上图,为什么会这样.小伙伴给出的解决方法是在div里面加上margin,这样是解决了.但在写代码的时候不会直接先写个overflow:hidden吧,造成这样的原因是为什么?

这里就涉及到margin塌陷的问题,

但有的小伙伴会说没有margin哪里来的margin塌陷,别忘了你写了margin:0,这样通了,因为margin合并导致所有子元素的marginmargin:0合并了,注意这种现象只在竖直方向出现

那解决方法有哪些哪?

这里我用个例子来说明:

<body>
    <div class="parent">
        <div class="child1">
            <div class="child2">

            </div>
        </div>
    </div>

</body>

css

 * {
            margin: 0 auto;
            padding: 0 auto;
            box-sizing: border-box;
        }
        div {
          margin: 25px;
            border-radius: 50%;
        }

        .parent {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .child1 {
            width: 150px;
            height: 150px;
            background-color: gray;
        }

        .child2 {
            width: 100px;
            height: 100px;
            background-color: #fff;
        }

按照上面的代码出来的页面是这样的:

和上面那个问题一样,都是由于margin塌陷,解决方法:

  • border
   * {
              margin: 0 auto;
              padding: 0 auto;
              box-sizing: border-box;
          }

          div {
              margin: 25px;
              border-radius: 50%;
              /border: 1px solid red; 
          }

          .parent {
              /* border: 25px solid red; */
              width: 200px;
              height: 200px;
              background-color: red;
          }

          .child1 {
              /* border: 25px solid gray; */
              width: 150px;
              height: 150px;
              background-color: gray;
          }

          .child2 {
              /* border: 25px solid #fff; */
              width: 100px;
              height: 100px;
              background-color: #fff;
          }
  • padding
   * {
              margin: 0 auto;
              padding: 0 auto;
              box-sizing: border-box;
          }

          div {
              margin: 25px;
              border-radius: 50%;
              /* border: 1px solid red; */
               padding: 1px; 
          }

          .parent {
              width: 200px;
              height: 200px;
              background-color: red;
          }

          .child1 {
              width: 150px;
              height: 150px;
              background-color: gray;
          }

          .child2 {
              width: 100px;
              height: 100px;
              background-color: #fff;
          }
  • overflow:hidden
   * {
              margin: 0 auto;
              padding: 0 auto;
              box-sizing: border-box;
          }

          div {
              margin: 25px;
              border-radius: 50%;
              /* border: 1px solid red; */
              /* padding: 1px; */
              overflow: hidden;
          }

          .parent {
              /* border: 25px solid red; */
              width: 200px;
              height: 200px;
              background-color: red;
          }

          .child1 {
              /* border: 25px solid gray; */
              width: 150px;
              height: 150px;
              background-color: gray;
          }

          .child2 {
              /* border: 25px solid #fff; */
              width: 100px;
              height: 100px;
              background-color: #fff;
          }

这样在看就不会有margin塌陷的问题存在了

{{topic.upvote_count || 0}}

Margin塌陷

先来说下什么是margin塌陷,就是在文档流中,竖直方向的margin会出现合并(叠加),值较大的会覆盖住值较小的,

昨天晚上和群里小伙伴,讨论了一个问题:

下图代码连接

就是上图,为什么会这样.小伙伴给出的解决方法是在div里面加上margin,这样是解决了.但在写代码的时候不会直接先写个overflow:hidden吧,造成这样的原因是为什么?

这里就涉及到margin塌陷的问题,

但有的小伙伴会说没有margin哪里来的margin塌陷,别忘了你写了margin:0,这样通了,因为margin合并导致所有子元素的marginmargin:0合并了,注意这种现象只在竖直方向出现

那解决方法有哪些哪?

这里我用个例子来说明:

<body>
    <div class="parent">
        <div class="child1">
            <div class="child2">

            </div>
        </div>
    </div>

</body>

css

 * {
            margin: 0 auto;
            padding: 0 auto;
            box-sizing: border-box;
        }
        div {
          margin: 25px;
            border-radius: 50%;
        }

        .parent {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .child1 {
            width: 150px;
            height: 150px;
            background-color: gray;
        }

        .child2 {
            width: 100px;
            height: 100px;
            background-color: #fff;
        }

按照上面的代码出来的页面是这样的:

和上面那个问题一样,都是由于margin塌陷,解决方法:

  • border
   * {
              margin: 0 auto;
              padding: 0 auto;
              box-sizing: border-box;
          }

          div {
              margin: 25px;
              border-radius: 50%;
              /border: 1px solid red; 
          }

          .parent {
              /* border: 25px solid red; */
              width: 200px;
              height: 200px;
              background-color: red;
          }

          .child1 {
              /* border: 25px solid gray; */
              width: 150px;
              height: 150px;
              background-color: gray;
          }

          .child2 {
              /* border: 25px solid #fff; */
              width: 100px;
              height: 100px;
              background-color: #fff;
          }
  • padding
   * {
              margin: 0 auto;
              padding: 0 auto;
              box-sizing: border-box;
          }

          div {
              margin: 25px;
              border-radius: 50%;
              /* border: 1px solid red; */
               padding: 1px; 
          }

          .parent {
              width: 200px;
              height: 200px;
              background-color: red;
          }

          .child1 {
              width: 150px;
              height: 150px;
              background-color: gray;
          }

          .child2 {
              width: 100px;
              height: 100px;
              background-color: #fff;
          }
  • overflow:hidden
   * {
              margin: 0 auto;
              padding: 0 auto;
              box-sizing: border-box;
          }

          div {
              margin: 25px;
              border-radius: 50%;
              /* border: 1px solid red; */
              /* padding: 1px; */
              overflow: hidden;
          }

          .parent {
              /* border: 25px solid red; */
              width: 200px;
              height: 200px;
              background-color: red;
          }

          .child1 {
              /* border: 25px solid gray; */
              width: 150px;
              height: 150px;
              background-color: gray;
          }

          .child2 {
              /* border: 25px solid #fff; */
              width: 100px;
              height: 100px;
              background-color: #fff;
          }

这样在看就不会有margin塌陷的问题存在了

38
回复 编辑