Maison > interface Web > tutoriel HTML > 如何解决外边距叠加的问题?_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:34:29
original
1402 Les gens l'ont consulté

第一种






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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal