扫码添加
客服微信

扫码关注
微信公众号

13950058311

资讯动态

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)在发生越界(折叠)的父元素和子元素之间插入文本或元素。——有副作用