400-685-0732

WJMonitor舆情之声

企业大数据智能舆情监测管理解决方案

全网监测海量数据按需发布监测预警

实时把握舆情动态精准追溯信息源头

获取验证码
企业采购 个人使用
当前位置: 首页 > SEO博客 > web排版时的Margin用法分析(上)

web排版时的Margin用法分析(上)

时间:2013-12-02 14:41:30
在使用margin排版的时候相信大家都是用来控制两个元素之间的间距的,那有没有注意过margin中的小细节和特殊的用法呢?下面就为大家举例说明margin排版中的特殊情况:上边距的融合   负边距的使用

1.上边距的融合

上边距的融合大致分为两种情况 1)是两个兄弟级元素的上下边距融合   2)父子级元素的上边距共用

1)兄弟级的上下融合 见下图有两个div D1与D2 若是给D1加入margin-bottom:30px; D2加入margin-top:20px;那么两个元素相距多少呢?按照左右的margin属性应该是叠加的,然而上下的margin是按照另一种计算 就是所谓的融合,两个margin取其大的30Px 而不是相加的50px见图2



2)父子级元素的上边距共用有一定的限制 首先是1:父级元素没有padding值 2:父级元素没有边框。举个例子,现在有两个div如图1所示,现在吧d2变成d1的子元素 然后给d2加上margin-top:30px;理想中可能是d2会距离父元素20px吧 实际效果如下(margin:20px的图为实际效果)子元素的margin-top值传输到了父元素中,若是在父元素中加上padding:1px之后效果如下,子元素的margin:20px的值生效;总结一下,在没有border 和 padding的时候子元素的margin-top会传输到父元素中 而有了之后 则会生效 这就是父子级的margin的特效.未完待续。。。





分享按钮