解决外边距溢出各种方法
当为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