当前位置:首页 > 资讯中心 > 建站技术 >

查看更多资讯中心

margin越界现象的解决方法2018-12-11 16:38 厦门蓝典网络科技有限公司

内容摘要:毗邻的两个/多个盒元素的margin会合并为其中优先级最高的一个margin来共享。 毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容(包括标签和文本)、Padding或Border分隔。...

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


要做网站?680全包

要做小程序?680全包

咨询客服

蓝典客服热线 热线:05925325273 电话:13950058311 微信:13950058311 扫描二维码
添加客服微信

扫码关注

公众号:蓝典网络 (landianwl) 扫描二维码
关注蓝典公众号