Home >Web Front-end >HTML Tutorial >如何解决外边距叠加的问题？_html/css_WEB-ITnose
如何解决外边距叠加的问题？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:34:291384browse
第一种
第二种
如何使元素上下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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS入门_html/css_WEB-ITnoseNext article：HTML学习11：HTTP 方法_html/css_WEB-ITnose