admin管理员组

文章数量:1611402

因为position: absolute;会使元素脱标，脱标之后父盒子的padding或者子盒子的margin会失效，这时会出现一些问题：

 <style>
      * {
        box-sizing: border-box;
      }
      .fa {
        width: 400px;
        height: 300px;
        background-color: skyblue;
        margin: 200px auto;
        position: relative;
        /* 给父盒子设置内边距不会起效果 */
        padding: 0 20px;
      }
      .son {
        width: 100%;
        height: 100px;
        background-color: pink;
        /* 使用了定位 */
        position: absolute;
        left: 0;
      }
    </style>

  <body>
    <div class="fa">
      <div class="son"></div>
    </div>
  </body>

显示效果中父盒子的padding失效：

或者是这样：

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .fa {
        width: 400px;
        height: 300px;
        background-color: skyblue;
        position: relative;
      }
      .son {
        width: 100%;
        height: 100px;
        background-color: pink;
        position: absolute;
        margin-left: 20px;
      }
    </style>
    <div class="fa">
      <div class="son"></div>
    </div>

显示效果子盒子的外边距还是有效的：

 如果设置的不是margin-left而是margin-top，生效并且不会触发外边距塌陷

 

本文标签： 解决方法PositionpaddingMargin

版权声明：本文标题：同时使用position和padding(或者margin)时出现的问题和解决方法 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1728604577a1165289.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。