脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

CSS外边距合并代码

  发布时间：2012-05-27 03:47:08   作者：佚名   我要评论
今天就先说说CSS的外边距吧。 围绕在元素边框的空白区域是外边距。这是W3CSchool给我们的解释。这句话看起来很模糊，说的不是那么明确
请看下面的图，就对边距的理解很清晰了。


我习惯把 图中所示的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相加的和，但其实不然。看一下效果图吧。


实际两个模块的间距是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中的盒子模型，不知道大家有没关注过，我会在后来博文中补上盒子模型这一点，希望大家关注。第一次写博客，感觉有点不习惯，我会坚持，提高自己的文字水平，努力让自己有一个提高，同时也能将我的观点和大家分享。

相关文章

  • 解决margin 外边距合并问题

    这篇文章主要介绍了解决margin 外边距合并问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-07-03

  • 详解CSS外边距折叠引发的问题

    这篇文章主要介绍了详解CSS外边距折叠引发的问题的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-27

  • 详解css外边距折叠（margin collapsing）

    外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下
    2018-10-30

  • 详解css边距重叠的几种解决方案

    本篇文章主要介绍了详解css边距重叠的几种解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-06

  • 简单的CSS叠加外边距示例

    这篇文章主要介绍了简单的CSS叠加外边距示例,是文档样式编写中一个需要注意的地方,需要的朋友可以参考下
    2015-07-21

  • css控制边界与边框示例(内边距、外边距使用方法)

    这篇文章主要介绍了css控制边界与边框示例,需要的朋友可以参考下
    2014-04-15

  • css 空白外边距互相叠加的解决方法

    空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.
    2010-07-04

  • CSS外边距叠加的问题,CSS教程

    网页制作Webjx文章简介：今天谈谈CSS外边距叠加的问题，边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 　　在进行CSS网页布局时会遇到
    2009-04-02

  • CSS 外边距(margin)重叠及防止方法

    这篇文章主要介绍了CSS 外边距(margin)重叠及防止方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-08-14

最新评论

关注微信公众号

扫一扫