这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然是CSS2.1盒模型规范……虽然很别扭,非常别扭的规定。   问题如下图,两层Div结构,Outer Div属性为“margin:0 auto”,本该紧贴外框顶部的,如果没有Inner Div,或者没有Inner Div的“margin-top”属性,一切如预期。但是当Inner Div设置了“margin-top:10px”之后,它的父元素Outer Div也被撑出来一个本不该有的“margin-top:10px”效果。

 这个“问题”……它是CSS2.1的盒模型中规定的内容——Collapsing margins

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。

  这就是原因了。“嵌套”的盒元素也算“毗邻”,也会 Collapsing Margins。这个合并Margin其实很常见,就是文章段落元素<p/>,并列很多个的时候,每一个都有上下1em的margin,但相邻的<p/>之间只会显示1em的间隔而不是相加的2em。这个很好理解,我就是奇怪为什么W3C要让嵌套的元素也共享Margin,想不出来在什么情况下需要这样的表现。   这个问题的避免方法很多,只要破坏它出现的条件就行。给 Outer Div 加上 padding/border,或者给 Outer Div / Inner Div 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)。   更多信息,关于不同值的margin折叠后表现的计算方法等等,可自行查阅W3C的CSS2.1规范:Collapsing margins

 

(转)MarginTop 为何影响父元素的 MarginTop的更多相关文章

  1. MarginTop 为何影响父元素的 MarginTop(转)

    add by zhj: 没找到原文 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心 ...

  2. CSSmargin击穿问题(子元素margin-top会影响父元素)

    最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑.唉,有些东西不用就忘. 一.问题描述 <div class="container& ...

  3. 子元素的margin-top会影响父元素

    ---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了margin-top,于是百度之后发现了原因. 在css2.1盒模型中 In this specific ...

  4. margin-top 为什么会影响父元素的 margin-top

    1.原因:  In this specification, the expression collapsing margins means that adjoining margins (no non ...

  5. 子元素margin-top为何会影响父元素?

    子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...

  6. margin-top影响父元素定位

    写样式时无意中发现margin-top会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class=" ...

  7. [css]当父元素的margin-top碰上子元素的margin-top

    出现条件:父元素和子元素都设置了margin-top 现象:子元素的margin-top可能会失效,导致父元素和子元素粘连在一起 解决方法: 1.给父元素加padding-top:1px. 2.给父元 ...

  8. 子元素设置margin-top后,父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. 布局时margin会影响父元素

    布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login&quo ...

随机推荐

  1. Unity 3D 进度条制作

    我们都知道玩游戏时,第一步要加载游戏,加载游戏时我们可以做一个简单的进度条来显示游戏加载进度,应为有了进度条,游戏画面不会过于呆板. 那么我们就开始游戏的进度条制作吧! 方法一: 1,使用NGUI制作 ...

  2. onvif规范 中文介绍

    什么是ONVIF ? ONVIF规范描述了网络视频的模型.接口.数据类型以及数据交互的模式.并复用了一些现有的标准,如WS系列标准等. ONVIF规范的目标是实现一个网络视频框架协议,使不同厂商所生产 ...

  3. mysql命令学习笔记(1):show table status like 'user';显示表的相关信息

    show table status like 'user';显示表的相关信息 +------------+--------+---------+------------+------+-------- ...

  4. Oracle闪回详解

      1.问题定义 闪回是dba做的工作.现在也可授权给某个用户. 闪回的定义:就是将用户错误的操作回恢到以前的状态.即使你的事务提交的commit. 如果你删除了一个表.Drop table(DDL) ...

  5. 增加配置Apache2 管理 SVN 访问权限

    继续之前的 文章里的配置 配置Apache2 管理 SVN 一.修改配置/etc/httpd/conf.d/ subversion.conf <Location /svn/> DAV sv ...

  6. win32 清空ListBox所有内容

    Q:clear listbox hi i am working in VC++ 6 using Win32 App. .............tell me how to clear the lis ...

  7. 项目 Web 的 NuGet 程序包还原失败: 找不到“1.0.0”版本的程序包“Microsoft.Net.Compilers”。。 0

    项目   Web 的 NuGet 程序包还原失败: 找不到“1.0.0”版本的程序包“Microsoft.Net.Compilers”.. 0 使用vs的NutGet包管理器时,另一台电脑从svn下载 ...

  8. 2^x mod n = 1(hd1395)

    2^x mod n = 1 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  9. 配置阿里云作为yum 源

    第一步:下载aliyum 的yum源配置文件. http://mirrors.aliyun.com/repo/ 第二步:把下载到的repo文件复制到/etc/yum.repo.d/目录下. ----- ...

  10. XML的Schema约束

    XSD文档至少要包含:schema根元素和XML模式命名空间的定义.元素定义.需要注意的是XSD中必须定义一个且只能定义一个schema根元素,根元素中包括模式的约束,XML模式命名空间的定义,其他命 ...