1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      详解CSS外边距折叠引发的问题

        发布时间2019-02-27 15:32:01   作者lxjjjjjj   我要评论

      这篇文章主要介绍了详解CSS外边距折叠引发的问题的相关资料小编觉得挺不错的现在分享给大家也给大家做个参考一起跟随小编过来看看吧

      第一种两个块级元素的上下边距折叠

      第二种父元素和子元素或者最后一个元素的外边距

      第三种空的块级元素的上下外边距

      折叠的根本原因

      margin之间直接接触没有阻隔

      折叠后外边距的计算

      1.如果两个外边距都是正值折叠后的外边距取较大的一个
      2.如果两个外边距一正一负折叠后的边距为边距之和
      3.如果两个外边距都为负数折叠后边距为较小的边距

      解决方案解决方法?#23548;?#19978;也就是阻止外边距直接接触

      第一种第三种只有静态流的元素才会发生外边距合并故设置float position inline-block都可以

      <style>
      .bother{
                  width: 50px;
                  height: 50px;
                  margin: 50px;
                  background-color: #44cc00;
                  /*1.float: left;*/
                  /*2.position: absolute;*/
                  <!--3.display: inline-block;-->
              }
              /*.father{*/
                  /*2.position: relative;*/
                  /*background:#cccdd1;*/
              /*}*/
              /*.bother1{*/
                  /*2.top:50px;*/
              /*}*/
              /*.bother2{*/
                  /*2.top:250px;*/
              /*}*/
      </style>
      <body>
      <div class="father">
      <div class="bother1 bother"></div>
      <div class="bother2 bother"></div>
      </div>
      </body>

      第二种嵌套的情况只要border padding非0或者有inline元素隔开比如在父元素里加一行文字也可以

      <style>
              .margin-box{
                  width: 50px;
                  height: 50px;
                  /*margin: 50px;设置了上下左右的外边距*/
                  margin: 50px;
                  /*margin-left: 50px;*/
                  /*margin-right: 50px;*/
                  /*div是块级元素所以设置左右外边距也不会使父元素有左右外边距*/
                  background-color: #fae900;
                  /*5.2 display: inline-block;*/
              }
              .father{
                  <!--3.overflow: hidden;-->
                  background:#cccdd1;
                  /*1.border: 1px solid;*/
                  /*2.padding: 20px;*/
                  /*5.1 display: inline-block;*/
              /*如果没有border和padding只有测试这个字那么子元素的外边距不会在父元素里显示*/
              /*而仅仅只有上外边距显示下外边距不显示*/
              /*而如果在子元素下面同样写一个测试那么下外边距?#19981;?#26174;示*/
              }
      
          </style>
      </head>
      <body>
      <div class="father">
          <!--4.<span>测试</span>-->
          <div class="margin-box"></div>
          <!--4.<span>测试</span>-->
      </div>
      </body>
      

      以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚本之家

      相关文章

      • 详解css外边距折叠margin collapsing

        外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距本文详细的介绍了一下css外边距折叠的实现分为3种情况非常具有实用价值需要的朋友可以参考下
        2018-10-30

      最新评论

      3dԻв

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>