这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是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. [Android 4.4.3] 泛泰A860 Omni4.4.3 20140610 RC2.0 三版通刷 by syhost

    欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam  (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...

  2. 这个更新需要花去 50.6 M 磁盘上总计 /boot 的空间。请在 7737k 磁盘上留出 /boot 空间。清空您的回收站和临时文件,用“sudo apt-get clean

    系统升级会下载多余的内核,删除即可. 1.命令:dpkg --get-selections|grep linux             //带image的为系统内核 2.命令:   uname -a ...

  3. SSCTF Final PWN

    比赛过去了两个月了,抽出时间,将当时的PWN给总结一下. 和线上塞的题的背景一样,只不过洞不一样了.Checksec一样,发现各种防护措施都开了. 程序模拟了简单的堆的管理,以及cookie的保护机制 ...

  4. U盘变小恢复工具——亲测完美可用

    大白菜U盘,装系统后,U盘损坏,格盘后8G只剩345M,用usbboot恢复到了2G容量.离8G还差很远.用U盘变小恢复工具后,完美恢复到原来大小.在此记录一下,以待下次遇到相似情况使用. 原文地址 ...

  5. ionic安装

    npm set registry http://registry.cnpmjs.org/ 设置淘宝镜像

  6. 找出数组中特定和数字下标(JAVA)

    比如: 输入: numbers={2, 7, 11, 15}, target=9 输出: index1=1, index2=2 public class _003TwoSum { public sta ...

  7. Java并发编程小记

    1. Semaphore 信号量是一种计数器,用来保护一个或者多个共享资源的访问.如果线程要访问一个共享资源,必须先获得信号量.若内部计数器大于0,则减1,若等于0,则线程进入休眠直至计数器大于等于0 ...

  8. 给WebApp加一个“壳”,实现Andriod系统添加到桌面

    IOS系统的Safari浏览器有一个“添加到桌面”的功能,能在手机桌面上为你的Webapp添加一个快捷方式,其外观和Native App看起来一样. 这个功能对Webapp来说太有用了,它能让用户像“ ...

  9. java学习:AWT组件和事件处理的笔记(1)--文本框

    java.awt包中的TextField类是专门用来建立文本框的,即TextField类创建的一个对象便是一个文本框. 1.TextField类的主要方法    (1)TextField()      ...

  10. web安全测试工具介绍---webscarab

    webscarab: 这主要是一款代理软件或许没有其它的工具能和OWASP的WebScarab如此丰富的功能相媲美了,如果非要列举一些有用的模块的话,那么他们包括HTTP代理,网络爬行.网络蜘蛛,会话 ...