请看下面的图,就对边距的理解很清晰了。

CSS外边距合并代码
我习惯把 图中所示的margin边界称为外边距,padding填充部分称之为内边距。设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好 办法就是设置padding了。设置内边距没什么好说的,设置的值是多少就是多少,不会出现什么异常,即浏览器的兼容性方面,但外边距就不一样了。

设置外边距,首先想到的是应该是双边距的问题。如果设这边距的这个元素同时设置了浮 动,那么浮动的这个方向如果有margin值的话,那么在ie6里面的实际距离是设置值的双倍。要解决这个问题不复杂,只要给这个元素加个 display:inline属性即可,但不建议这么做,因为这无形中增加了代码的质量,带宽很贵的哦,最好的办法就是在浮动的方向不设置margin 值,因为这个可以用其他的方法实现的,比如padding,或者设置在父层节点的style。

在一个问题就是垂直双编剧的合并问题。当两个垂直的双边距相遇时,它们将形成一个边距,合并后的边距等于发生合并的边距的较大值。

复制代码代码如下:
<style type="text/css">
*{padding:0;margin:0;}
.box{width:200px;height:120px;margin:0 auto;background:#FFC;}
.d1,.d2{height:40px;width:100%;overflow:hidden;}
.d1{background:#f00;margin-bottom:20px;}
.d2{background:#0033CC;margin-top:10px;}
</style>
<div class="top" style="height:100px;width:100%;"></div>
<div class="box">
<div class="d1"></div>
<div class="d2"></div>
</div>

看到这样的代码,顺着代码的思维看,这段代码的效果应该是d1模块和d2模块有个间距,间距值是d1的margin-bottom的20和d2的margin-top的10相加的和,但其实不然。看一下效果图吧。

CSS外边距合并代码
实际两个模块的间距是20,这就是垂直双编剧的合并问题了。有时候遇到这样的情况不知所然,不知怎么回事,后来才知道了垂直双边距。知道了问题 的根源,那么解决这个问题的最好办法就是避免这个问题的出现了。我是这么做的,比较懒惰的作法,不过绝对有效哈。

还有一个很不人性化的规范,就是一 个盒子,即一个模块如果没有上边距(margin-top)或者上边框(border-top),那么这个盒子的上边距会和这个盒子的第一个子元素的上边 距重合。不说什么了,把代码和效果贴上,直观,易理解。知道了问题所在就知道了怎么避免问题的出现了。

复制代码代码如下:
<style type="text/css">
*{padding:0;margin:0;}
.box{width:200px;height:120px;margin:0 auto;background:#FFC;}
.d1,.d2{height:40px;width:100%;margin-top:10px;overflow:hidden;}
.d1{background:#f00;}
.d2{background:#0033CC;}
</style>
<div class="top" style="height:100px;width:100%;"></div>
<div class="box">
<div class="d1">我想和老不死的分家我想和老不死的分家</div>
<div class="d2"></div>
</div>

CSS外边距合并代码
我对这些的理解都是基于css中的盒子模型,不知道大家有没关注过,我会在后来博文中补上盒子模型这一点,希望大家关注。第一次写博客,感觉有点不习惯,我会坚持,提高自己的文字水平,努力让自己有一个提高,同时也能将我的观点和大家分享。

标签:
外边距,合并

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
千金楼资源网 Copyright www.htabc.com

评论“CSS外边距合并代码”

暂无“CSS外边距合并代码”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。