加载中…
个人资料
jannesand
jannesand
  • 博客等级:
  • 博客积分:0
  • 博客访问:163,373
  • 关注人气:21
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

解决margin合并(折叠)的方法

(2013-09-17 11:22:39)
标签:

margin合并

margin合并解决方法

margin折叠解决方法

分类: DIV CSS

垂直外边距合并问题常见于第一个子元素的父元素的间距、相邻元素之间的间距问题。

一、第一个子元素的父元素的间距问题:


  
我是firstChild,我只是想和我的父元素隔开点距离,这样看起来舒服。
 
  
我要和楼上隔开点的距离。恩,能与底边有点呼吸距离就更好了。
 

 

效果图:

解决margin合并(折叠)的方法

解决margin合并(折叠)的方法


显然这不是我们要的结果,只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题,IE6/7下反而表现良好。例子可以查看下面代码(IE下表现“正常”,标准浏览器下查看出现“bug”)

解决办法:

1)在父层div加上:overflow:hidden;

 

2)把margin-top外边距改成padding-top内边距;

 

3)父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border
父层div加: padding-top: 1px,或者 border-top:1px ;

 

4)设置父元素或子元素浮动(left/right)


5)设置父元素dispaly:inline-block或者display:table-cell;

 

6)给父元素加上绝对定位

以上6种办法都能解决第一个子元素的父元素的间距问题

 

效果图:
解决margin合并(折叠)的方法

解决margin合并(折叠)的方法

二、相邻元素之间的margin问题:

.box_a{width:50px; height:50px; background:#f00; margin:10px 0;}
.box_b{width:50px; height:50px; background:#f0f; margin:20px 0;}


 

截图:
解决margin合并(折叠)的方法

两个相邻元素之间的间隔,只有20px;如果我要实现两元素间的间隔是我理想的间隔,即30px,该如果实现呢?方法有以下两个:

 

1)给最后面的元素加上浮动(left/right)

 

2)给最后一个元素加上display:inline-block;但是IE6和IE7下不完全支持display:inline-block,所以要加上*display:inline;zoom:1即可解决IE6、7的bug;

.box_a{width:50px; height:50px; background:#f00; margin:10px 0;}
.box_b{width:50px; height:50px; background:#f0f; margin:20px 0;display:inline-block;*display:inline; zoom:1;}

解决margin合并(折叠)的方法

解决margin合并(折叠)的方法

以上是对margin边距合并的解决方法一些总结,希望对大家有帮助!让我们以后能更随心所欲地驾驭CSS,搭建完美的页面效果!

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有