解决外边距溢出各种方法

不不才

2019-12-28 3,131 阅读1分钟

当为div 的第一个子元素设置margin-top时,会作用到父元素身上。

成因：

父元素 div 未设置边框。

第一个子元素设置了上外边距（margin-top: 10rem;）或者最后一个子元素设置了下外边距（margin-bottom: 10rem;）。

导致父元素与子元素一起发生相应的偏移的现象，即为：外边距溢出现象。

1. 父元素触发 BFC

问题：导致某些属性出现问题如设置 overflow: hidden; 阴影无法穿透

     /* 如 */
    .box{
        overflow: hidden;
    }

2. 父元素增加伪元素

问题： flex布局会出现问题

/**
    设置外边距的元素不与父元素直接接触既不会一起发生偏移
而父元素前或后添加的伪元素子元素 content 为空，所以不会出现不希望看到的效果
*/
 /** 上外边距溢出 */
.div-parent::before {
    display: table;
    content: "";
}
  /** 下外边距溢出 */
 .div-parent::after {
    display: table;
    content:""
}

3. 为父元素设置边框

问题：导致高度出现问题

border-top:1px solid #ddd;

4. 为父元素设置内边距取代外边距

问题：在某些规范下无法统一边距问题

.box{
    padding:20px
}

5. 在子元素div前增加空的table

问题：类似于伪元素

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

感谢以下链接

blog.csdn.net/weixin_4434…