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. PostgreSQL Replication之第七章 理解Linux高可用（1）

    高可用(HA)是工业长期持续的,不间断的服务.在本章,您将了解高可用软件的历史,概念和实现与PostgreSQL复制和高可用之间的关系. 本章将详细地讲述如下主题: •理解高可用性的目的 •衡量可用性 ...

  2. 关于H5中 input消除默认，取消在手机上的点击高亮效果

    input消除默认,代码如下    input{             -webkit-tap-highlight-color: rgba(255, 255, 255, 0);            ...

  3. [BJOI2014]大融合 LCT维护子树信息

    Code: #include <cstdio> #include <algorithm> #include <cstring> #include <strin ...

  4. mysql优化篇之表分区

             当表的数据量达到一定数量时(如单个.myd文件都达到10G,myd 是mysql的数据文件),这时候读取起来必然效率很低.          1.从业务角度可以解决(分表)      ...

  5. vue使用axios中 this 指向问题

    1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决.如下: methods: { lo ...

  6. Jupyter Notebook 常用的快捷键

    Jupyter Notebook 有两种键盘输入模式.编辑模式,允许你往单元中键入代码或文本:这时的单元框线是绿色的.命令模式,键盘输入运行程序命令:这时的单元框线是灰色. Shift+Enter : ...

  7. JS 中深拷贝的几种实现方法

    JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...

  8. 【Codeforces Round #422 (Div. 2) C】Hacker, pack your bags!(hash写法)

    接上一篇文章; 这里直接把左端点和右端点映射到vector数组上; 映射一个open和close数组; 枚举1..2e5 如果open[i]内有安排; 则用那个安排和dp数组来更新答案; 更新答案完之 ...

  9. Spring学习总结（13）——Spring+Log4j+ActiveMQ实现远程记录日志

    应用场景 随着项目的逐渐扩大,日志的增加也变得更快.Log4j是常用的日志记录工具,在有些时候,我们可能需要将Log4j的日志发送到专门用于记录日志的远程服务器,特别是对于稍微大一点的应用.这么做的优 ...

  10. POJ 2081 Recaman's Sequence

    Recaman's Sequence Time Limit: 3000ms Memory Limit: 60000KB This problem will be judged on PKU. Orig ...