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. spring mvc给参数起别名

    需求: 将http报文请求(保护body和url)中的参数传递给Controller时支持使用别名. 举例: 下面两条请求报文的结果是一致的. http://example.com/foo?jobTy ...

  2. shell call python

    python -c "import os; p=os.getcwd(); print(p);print(p);print(p);print('test over')"

  3. POJ 3567 Cactus Reloaded（仙人掌直径）

    题意 裸的仙人掌直径. 题解 先考虑基环树的直径:先算出每颗“树”的直径,再在环上跑DP 再考虑仙人掌的直径:把每个基环树缩成一条边,边长为基环树深度. #include<iostream> ...

  4. 苹果下一代iPhone曝光

    3月23日消息,据9TO5Mac报道,苹果下一代iPhone(以下暂命名为iPhone 11)可能会提供像三星Galaxy S10的PowerShare功能,能为Apple Watch和AirPods ...

  5. 使用let's encrypt为你的Ubuntu14+nginx网站保驾护航！

    finch最近正在研究一个新的网站系统,闲的没事想搞搞ssl,结果搞了两天,遇到很多问题,现在记录并分享一下经验. 环境之前搭建好了是Ubuntu14+nginx+php5+mysql 现在开始使用l ...

  6. iptables指南

    在了解iptables之前我们先了解一下 防火墙 的概念防火墙是由Check Point创立者Gil Shwed于1993年发明并引入国际互联网,防火墙也是一种位于内部网络与外部网络之间的网络安全系统 ...

  7. socket 编程的端口和地址复用

    在linux socket网络编程中,大规模并发TCP或UDP连接时,经常会用到端口复用:   int opt = 1;   if(setsockopt(sockfd, SOL_SOCKET,SO_R ...

  8. HDU 4309 Seikimatsu Occult Tonneru

    Seikimatsu Occult Tonneru Time Limit: 6000ms Memory Limit: 32768KB This problem will be judged on HD ...

  9. [Teamcenter 2007 开发实战] 调用web service

    前言 在TC的服务端开发中, 能够使用gsoap 来调用web service. 怎样使用 gsoap  , 參考 gsoap 实现 C/C++ 调用web service 接下来介绍怎样在TC中进行 ...

  10. Introduction to IIS Architectures

    https://docs.microsoft.com/en-us/iis/get-started/introduction-to-iis/introduction-to-iis-architectur ...