PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > html教程

如何解决外边距叠加的问题？_html/css_WEB-ITnose

原创
2016-06-24 11:34:29 1076浏览

第一种






super胡








第二种






super胡














如何使元素上下margin不折叠呢？

1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠 （注意这里指的是上下相邻的元素）
2.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠

第二种方法：把这两个

分别放进两个建立了 BFC (IE7- 触发 hasLayout)的父级容器里.

需 要建立 BFC 的不是这两个

而是它们所在的父级容器.

触发block formatting context即可，触发的方法：
1. float不为none
2. overflow不为visible
3. display设为‘table-cell’, ‘table-caption’, 或‘inline-block’
4. position既不是static也不是relative
5. zoom:1, IE的hasLayout特性会建立一个新的block formatting context

如何解决外边距叠加的问题？PHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：CSS入门_html/css_WEB-ITnose 下一条：HTML学习11：HTTP 方法_html/css_WEB-ITnose

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！