Home > Web Front-end > HTML Tutorial > 如何解决外边距叠加的问题?_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:34:29
Original
1401 people have browsed it

第一种






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

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template