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. Android项目实战（四十四）：浅谈Postman (网络请求调试插件)

    前言: Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件.    在项目开发中,可以依赖此工具模拟API测试. 使用详解: 各种情况Api的模拟请求的Postman使用方 ...

  2. js确认框confirm()用法实例详解

    先为大家介绍javascript确认框的三种使用方法,具体内容如下 第一种方法:挺好用的,确认以后才能打开下载地址页面.原理也比较清晰.主要用于删除单条信息确认. ? 1 2 3 4 5 6 7 8 ...

  3. POJ-1456 Supermarket 贪心问题 有时间限制的最小化惩罚问题

    题目链接:https://cn.vjudge.net/problem/POJ-1456 此题与HDU-1789完全是一道题 题意 有N件商品,分别给出商品的价值和销售的最后期限,只要在最后日期之前销售 ...

  4. AWK行处理的用法实例

    第一节 awk的工作流程及基础用法 awk操作符会先检索文件的行信息,然后在行信息里找需要的内容. Awk的默认分割付是空格,awk '/模式/{print $1,$2}' file ##模式的位置可 ...

  5. django-xadmin使用之配置页眉页脚

    环境:xadmin-for-python3 python3.5.2 django1.9.12 在模块的adminx.py文件中增加以下代码即可: # TIP 定义页头页脚 class GlobalSe ...

  6. Entity Framework之Model First开发方式

    一.Model First开发方式 在项目一开始,就没用数据库时,可以借助EF设计模型,然后根据模型同步完成数据库中表的创建,这就是Model First开发方式.总结一点就是,现有模型再有表. 二. ...

  7. C#泛型链表Demo

    /// <summary> /// 节点 /// </summary> /// <typeparam name="T"></typepar ...

  8. 异常Exception

    try…catch…finally恐怕是大家再熟悉不过的语句了,而且感觉用起来也是很简单,逻辑上似乎也是很容易理解.不过,我亲自体验的“教训”告诉我,这个东西可不是想象中的那么简单.听话.不信?那你看 ...

  9. leetcode 10 Regular Expression Matching（简单正则表达式匹配）

    最近代码写的少了,而leetcode一直想做一个python,c/c++解题报告的专题,c/c++一直是我非常喜欢的,c语言编程练习的重要性体现在linux内核编程以及一些大公司算法上机的要求,pyt ...

  10. IIS 优化

    http://www.cnblogs.com/wangjingblogs/archive/2013/02/27/2934706.html 通过对IIS7的配置进行优化,调整IIS7应用池的队列长度,请 ...