这个问题会出现在所有浏览器当中，原因是css2.1盒子模型中规定，

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分隔。

　　

解决办法

给父元素加个padding-top:1px；

子元素的margin-top影响父元素原因和解决办法的更多相关文章

  1. 子元素margin-top为何会影响父元素？

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

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

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

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

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

  4. 子DIV设置margin-top影响父DIV位置的解决办法

    父div如果没有任何东西,子div设置margin-top,父div会下落 <!DOCTYPE html> <html lang="en"> <hea ...

  5. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

  6. 当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...

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

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

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

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

  9. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  10. Atitit.判断元素是否显示隐藏在父元素 overflow

    Atitit.判断元素是否显示隐藏在父元素 overflow 1.1. scrollTop  指的是元素的滚动条顶端距离原生基线的高度...1 1.2. 判断元素是否显示隐藏在父元素  $(next) ...

随机推荐

  1. 数据结构与算法分析——C语言描述

    P1.1 选择问题,选择出第K大的数,并画出N为不同值的运行时间,K=N/2 毕业两年半,重写排序,感觉良好.代码使用冒泡排序,库函数clock计算大致运行时间. // P1_1.cpp : Defi ...

  2. leetcode排列，求第k个排列

    stl 中的下一个排列在写一遍忘了 写个1个多小时,使用递归写的,错误就在我使用一个list保存当前剩下的数,然后利用k/(n-1)!的阶乘就是删除的数字,但进过观察, 比如 list={1,2,3} ...

  3. [转载]jQuery UI 使用

    最近项目中使用了一些插件来做页面,这里把jQuery UI的使用分享出来,希望 对新手有帮助.文章结尾附源码下载. 1     jQuery UI 2     为我所用 2.1     Tabs 2. ...

  4. MT9M021/MT9M031总结

    MT9M021/MT9m031在低光照度下和捕捉移动场景有非常优异的表现,属于近红外摄像头, S1: Aptina's MT9M021/MT9M031 sensor is capable of a m ...

  5. [转]Ubuntu上的包管理：dpkg，apt和aptitude

    一直以来对于ubuntu的包管理的概念就是apt-get,偶尔手动装个包就是dpkg -i,现在觉得是要系统地了解一下这几个包管理的命令. 原文转自: http://zhouliang.pro/201 ...

  6. COM初体验

    以前在我学校里培训过一段时间C++,我敬爱的吴老师略有提及.那个时候觉得COM遥不可及,觉得,哇塞好神圣.我觉得自己啥都没学好,我不应该这么早去涉及这片过于光荣的领地.既没有觉悟也没有动力去迎接这样一 ...

  7. hdu 4287

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4287 #include<cstdio> #include<cstring> # ...

  8. DocumentBuilder setEntityResolver() Method

    Description The Javax.xml.parsers.DocumentBuilder.setEntityResolver(EntityResolver er) method specif ...

  9. 2014 牡丹江现场赛 i题 （zoj 3827 Information Entropy）

    I - Information Entropy Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %l ...

  10. orace owi介绍

    第1章 OWI介绍记录和观察进程所经历的等待现象的功能和界面以及方法论,统称为OWI,也就是Oracle Wait Interface.等待事件的P1.P2.P3值可以通过v$session_wait ...