css的盒子模型里是这样规定两个对象之间的距离的：对象之间的间距是由两个对象的盒子模型的最终计算值得出来的，也就是说两个对象之间的间距就是两个对象的距离，但是当遇到两个对象一个有下外边距margin，一个有下外边距margin，这个问题变得有点复杂。我们来看看。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Margin上下边距重叠问题</title>

<style>

#one{width:200px;height:100px;background-color:#ff0000;margin:10px;}

#two{width:200px;height:100px;background-color:#00ff00;margin:10px;}

</style>

</head>

<body>

<div id="one"></div>

<div id="two"></div>

</body>

</html>

如果你认为one和two盒子的距离是20px，那你就错了，它们的真正距离是10px。

这是css的一个特性，当空白边叠加时，以较大的margin值为准。这在html和xhtml中都是一样的情况。

但如果把上例中的one和two盒子都进行float，那情况又不同了，如：

<style>

#one{width:200px;height:100px;background-color:#ff0000;margin:10px;float:left;}

#two{width:200px;height:100px;background-color:#00ff00;margin:10px;float:left;clear:both;}

</style>

这时one与two盒子之间的上下距离变成了20px，这就是说当两个对象都浮动的情况下就不再遵守空白边叠加的规则了。

css中margin上下外边距重叠问题的更多相关文章

  1. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  2. CSS Margin（外边距）

    CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...

  3. margin属性以及垂直外边距重叠问题

       盒子的margin属性         盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...

  4. 关于collapsed margin（外边距合并）

    这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里 ...

  5. css中的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  6. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  7. CSS中margin属性

    css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并

  8. __x__(22)0907第四天__ 垂直外边距重叠

    外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...

  9. CSS中margin边界叠加问题及解决方案(转)

    边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...

随机推荐

  1. 用LinkedList模拟Stack功能

    集合体系在Java中比较重要,整个集合体系是在JDK1.2版本后出现,Collection作为整个体系的顶层,拥有整个体系通用的功能.对于其下面的小弟,也是各有千秋.下面就一道面试题来看看Linked ...

  2. ASP.NET Core学习日志1

    1.ASP.NET进行了结构化的优化,使框架更为精简,模块化更加明显. 2.ASP.NET Core不再基于System.Web.dll,而是基于细粒度.分解的NuGet包. 3.基础特性: 1.We ...

  3. UVa 729 The Hamming Distance Problem【枚举排列】

    题意:给出数组的长度n,给出h,表示这个数组里面含有h个1,求其所有的排列 用next_permutation就可以了 #include<iostream> #include<cst ...

  4. [NOIP2014提高组]联合权值

    题目:洛谷P1351.Vijos P1906.codevs3728.UOJ#16. 题目大意:有一个无向连通图,有n个点n-1条边,每个点有一个权值$W_i$,每条边长度为1.规定两个距离为2的点i和 ...

  5. token登录验证机制

    一张图解释 token登录验证机制

  6. 题解 P2068 【统计和】

    这是一道单点修改,区间查询的线段树. 需要实现的操作有三个:建树,更新与查询. 首先,线段树用结构体维护,如下: struct node { int l, r; int val; } tree[max ...

  7. vmware下minimum安装centos后配置网络

    原文出处:http://www.cnblogs.com/lanhj/p/3785553.html 昨晚用vmware安装centos时选择minimum安装,目的熟悉基本配置. 上来想yum一个vim ...

  8. C++ priority_queue的使用 & Java PriorityQueue

    刚刚那道BST的题目,也用到了priority_queue,那是那个没有定义比较函数. 那么下面这个,就要定义比较函数. 它的模板声明带有三个参数,priority_queue<Type, Co ...

  9. hadoop云盘client的设计与实现（一）

    近期在hadoop云盘client项目.在做这个项目曾经对hadoop是一点都不了解呀,在网上查了好久.将client开发的是非常少的,在做这个项目的过程中遇到非常多奇葩的问题. 并且试图换过好多方案 ...

  10. maven中使用mybatis

    1.Mybatis优缺点 优点: Mybatis实现了对Dao层的封装,隔离了SQL语句,便于管理,避免了像JDBC那样操作数据集,便于扩展等等. 缺点: Mybatis属于?半自动“ORM”,比Hi ...