解决外边距溢出各种方法

不才
2019-12-28 11:58:16

当为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>

感谢以下链接

https://blog.csdn.net/weixin_44343449/article/details/93170371

https://www.cnblogs.com/kldn208/p/11439842.html