add by zhj: 没找到原文

这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是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”效果。

 
Inner Div [margin-top: 10px]

Outer Div [margin: 0 auto]

HTML Demo Area

 这个“问题”……它是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,比如在两个盒相邻的边上加一个透明的border。或者给 Outer Div / Inner Div 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)。   更多信息,关于不同值的margin折叠后表现的计算方法等等,可自行查阅W3C的CSS2.1规范:Collapsing margins

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

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

    这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是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. android 系统开发板挂载U盘

    cat /proc/partitions 查看有u盘设备 df 查看挂载情况 iTOP4416开发板插入u盘,自动挂载到 /mnt/udisk1

  2. Linux quotacheck失败

    我找了多少个帖子才发现解决这个问题的啊...最终还是靠FQ找的这位大佬的文章  http://www.2daygeek.com/quotacheck-error/# 当我在执行quotacheck - ...

  3. C语言复习---获取矩阵的对角和

    #include <stdio.h> #include <stdlib.h> #include <math.h> #define MAX 5 int main() ...

  4. bzoj千题计划218:bzoj2333: [SCOI2011]棘手的操作

    http://www.lydsy.com/JudgeOnline/problem.php?id=2333 上次那个是线段树,再发一个左偏树 维护两种左偏树 第一种是对每个联通块维护一个左偏树 第二种是 ...

  5. bzoj千题计划191:bzoj2337: [HNOI2011]XOR和路径

    http://www.lydsy.com/JudgeOnline/problem.php?id=2337 概率不能异或 但根据期望的线性,可以计算出每一位为1的概率,再累积他们的期望 枚举每一位i,现 ...

  6. HDU 2509 基础Anti-SG NIM

    如果我们规定当局面中所有的单一游戏的SG值为0时,游戏结束,则先手必胜当且仅当:(1)游戏的SG!=0 && 存在单一游戏的SG>1:(2)游戏的SG==0  && ...

  7. Linux命令(四)文件传输

    1. 将当前目录下的test1.txt文件,复制到 /tmp/Douzi目录下,命名为test1.py   2. 将服务器/tmp/Douzi/hello.py复制到本地上,重命名为 hello_Do ...

  8. .NET面试题系列(七)IIS

    应用程序池的集成模式和经典模式的区别 应用程序池模式会影响服务器处理托管代码请求的方式. 如果托管应用程序在采用集成模式的应用程序池中运行,服务器将使用 IIS 和 ASP.NET 的集成请求处理管道 ...

  9. UI渲染回顾简单笔记

    UI渲染的简单过程: CPU,GPU,显示器协同工作,CPU 中计算显示内容,比如视图的创建.布局计算.图片解码.文本绘制等,然后将计算结果提交给GPU,由 GPU 进行变换.合成.渲染.随后 GPU ...

  10. [R语言]读取文件夹下所有子文件夹中的excel文件,并根据分类合并。

    解决的问题:需要读取某个大文件夹下所有子文件夹中的excel文件,并汇总,汇总文件中需要包含的2部分的信息:1.该条数据来源于哪个子文件夹:2.该条数据来源于哪个excel文件.最终,按照子文件夹单独 ...