资讯动态
News
——
margin越界现象的解决方法
2018-12-11
毗邻的两个/多个盒元素的margin会合并为其中优先级最高的一个margin来共享。
毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容(包括标签和文本)、Padding或Border分隔。
如何解决父元素的第一个子元素的margin-top越界问题
1)为父元素加border-top: 1px;——有副作用
2)为父元素指定padding-top: 1px;——有副作用
3)为父元素指定overflow:hidden;——有副作用
4)为父元素添加前置内容生成——推荐使用
.parent:before {
content: ' ';
display: table;
}
5)父级或子元素使用浮动或者绝对定位absolute;——有副作用
6)在发生越界(折叠)的父元素和子元素之间插入文本或元素。——有副作用