最近在布局时遇到一个有趣的问题

<style> #div1{width:200px;height:200px;background:red;}  #div2{width:50px;height:50px;background:blue;margin:20px;}<style>

<div id="div1"> <div id="div2"> </div> </div>

实验了一下，结果是这样的：                这样问题来了：我设置的margin-top外边距20px到哪里去了？

 

我用firebug看了一下结构，发现div2的上下左右外边距都存在，那为什么div2会贴着div1呢？翻看了下w3s的文档，知道了这是外边距合并。查询地址外边距合并

css中外边距合并的更多相关文章

  1. 关于CSS的外边距合并问题

    首先,需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 而在普通文档流中,这又分两种情况,分别是父子元素之间和相邻元素之间. <!D ...

  2. CSS 垂直外边距合并：规范、延伸、原理、解决办法

    <CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...

  3. CSS Margin外边距合并

    应该知道这点东西的!!! 可是偏偏记不住! 外边距合并会发生在以下两种情况下: 1 垂直出现的两个拥有外边距的块级元素. div1 { margin-bottom: 20px; } div2 { ma ...

  4. css的外边距合并或者外边距塌陷问题

    第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40p ...

  5. css中外边距

    1.内部元素设置margin等,父元素高度不能适应 .classA { height: 200px; background-color: cornflowerblue; overflow: hidde ...

  6. CSS外边距合并的几种情况

    CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...

  7. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

  8. css外边距合并和z-index的问题

    参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...

  9. CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

随机推荐

  1. ArcGIS Engine中的8种数据访问 （转）

    数据是GIS的基础, 访问数据也是进行任何复杂的空间分析及空间可视化表达的前提.ArcGIS支持的数据格式比较丰富,对不同的数据格式支持的程度也有很大差异.本文主要介绍一下以下八种数据格式在ArcGI ...

  2. petapoco存储过程

    db.ExecuteScalar<string>("exec P_GetCode @0,@1,@2,@3,@4,@5",); using (var db = new D ...

  3. MySQL MEM_ROOT详细讲解

    这篇文章会详细解说MySQL中使用非常广泛的MEM_ROOT的结构体,同时省去debug部分的信息,仅分析正常情况下,mysql中使用MEM_ROOT来做内存分配的部分. 在具体分析之前我们先例举在该 ...

  4. Mono登录界面记住密码的控件

    <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_co ...

  5. 数据库—SQL语句

    下列语句部分是Mssql语句,不可以在access中使用. SQL分类:   DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE)   DML—数据操纵语言(SELECT,DEL ...

  6. SQLAlchemy模型使用

    SQLAchemy模型使用 简介: SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:将对象转换成SQL,然后使用 ...

  7. nodejs——qureystring的作用

    当node服务器向另一个服务器发送数据时,首先要转换成字符串再post或者get,这个时候就要用到node内置的这个包querystring, querystring.stringify(data);

  8. lintcode-【中等】恢复IP地址

    题目 给一个由数字组成的字符串.求出其可能恢复为的所有IP地址.链接. 样例 给出字符串 "25525511135",所有可能的IP地址为: [ "255.255.11. ...

  9. [python]获取文件夹下所有文件名

    #---picknames.py---import os filenames = os.listdir(os.getcwd()) for name in filenames: print(name)

  10. Vuejs使用笔记 --- 框架

    这两天学了vuejs的模板,于此纪录一下. 这是整个大文件夹的配置,现在我们看到的所有文件都不需要去管,说要关注也只需要关注“index.html” "index.html"里面是 ...