这个问题会出现在所有浏览器当中，原因是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. 51单片机的堆栈指针（SP）

    堆栈指针(SP,Stack Pointer),专门用于指出堆栈顶部数据的地址. 那么51单片机的堆栈在什么地方呢?由于单片机中存放数据的区域有限,我们不能够专门分配一块地方做堆栈,所以就在内存(RAM ...

  2. [Linux&Vim]输入输出流

    流不尽,东逝水 关于流,以前大致知道有这样三个概念:标准输入流(stdin).标准输出流(stdout)和错误输出流(stderr). 什么是流,做什么用的,怎么个用法? 基本概念下面这篇文章讲得已经 ...

  3. 免费开源的android项目分享

    免费开源的android项目分享:http://yun.baidu.com/share/link?shareid=2945649048&uk=3910054188

  4. asterisk帮助与国内论坛

    http://www.in2eps.com/fo-abnf/tk-fo-abnf-http.html www.asteriskguru.com/ http://www.voip-info.org/ h ...

  5. OpenOffice 服务开机启动

    1.准备以下软件 OpenOffice3.0,Windows Resource Kit Tools 分别默认安装 2.打开Windows Resource Kit Tools -> Comman ...

  6. UVa1606 UVaLive3259 FZU1309 HDU1661 POJ2280 ZOJ2390 Amphiphilic Carbon Molecules

    填坑系列 考虑所有经过两个点的直线,一定有最优解. 再考虑确定一个点,按极角顺序枚举所有直线,从而O(1)转移信息. 还有代码实现技巧 #include<cstdio> #include& ...

  7. ELK初学搭建(kibana)

    ELK初学搭建(kibana) elasticsearch logstash kibana ELK初学搭建 kibana 1.环境准备 centos6.8_64 mini IP:192.168.10. ...

  8. System.in与System.out(标准输入与标准输出)详解

    package test; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; p ...

  9. 两层Fragment嵌套，外层Fragment切换时内层Fragment不显示内容

    尊重他人劳动成果,转载请说明出处:http://blog.csdn.net/bingospunky/article/details/46847269 需求 在搭界面有这么样一个需求:须要两层的Frag ...

  10. Qt 学习之路 ：Repeater

    前面的章节我们介绍过模型视图.这是一种数据和显示相分离的技术,在 Qt 中有着非常重要的地位.在 QtQuick 中,数据和显示的分离同样也是利用这种“模型-视图”技术实现的.对于每一个视图,数据元素 ...