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. No mapping found for HTTP request with URI [/test2/test/add.json] in DispatcherServlet with name 'dispatcher'

    查看spring-mvc.xml中扫描包路径配置是否正确: <!-- 扫描controller(controller层注入) --> <context:component-scan ...

  2. c#中debug和release版本的区别

    1 debug版本称为调试版本,包含各种调试信息,以为开发人员提供强大的应用程序调试能力,其没有做任何优化,速度慢. 2 release版本称为发布版本,不保存调试信息,但是做了各种的优化,体积小,运 ...

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

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

  4. 排序算法(Apex 语言)

    /* Code function : 冒泡排序算法 冒泡排序的优点:每进行一趟排序,就会少比较一次,因为每进行一趟排序都会找出一个较大值 时间复杂度:O(n*n) 空间复杂度:1 */ List< ...

  5. Spring Boot学习总结（2）——Spring Boot整合Jsp

    怎么使用jsp上面起了疑问,查阅了多方资料,找到过其他人的博客的描述,也找到了spring在github上的给出的例子,看完后稍微改动后成功 整合jsp,于是决定将整合过程记载下来. 无论使用的是那种 ...

  6. [React] Make Controlled React Components with Control Props

    Sometimes users of your component want to have more control over what the internal state is. In this ...

  7. openGl超级宝典学习笔记 (2) 7个主要的几何图元

    点(GL_POINTS): 点总是正方形的像素,默认情况下,点的大小不受透视除法影响. 即无论与视点的距离怎样,它的大小都不改变.为了获得圆点.必须在抗锯齿模式下绘制点. 能够用glPointSize ...

  8. linux(debian/ubuntu)下连接安卓手机--小米4为例

    更改:如今小米连接Ubuntu等Linux系统,直接改动手机上的连接方式就可以. --------------------------------------------- 因为安卓手机底层就是lin ...

  9. centos7 keepalive双机热备~

    简单实现Keepalive双击热备~ 摘要:准备两台虚拟机A:192.168.161.7  B:192.168.161.35  虚拟ip:192.168.161.10 keepalive进程 具体关于 ...

  10. Server.UrlEncode与HttpUtility.UrlEncode的区别

    一.HttpUtility.UrlEncode 方法 1.public static string UrlEncode(byte[]) 将字节数组转换为已编码的 URL 字符串. 2.public s ...