这个问题会出现在所有浏览器当中，原因是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. [Unix.C]文件I/O

    大多数unix文件I/O操作只需要用到5个函数:open.read.write.lseek和close.此处所说明的函数均为不带缓存的I/O操作(下同).不带缓存指的是每个read和write都调用内 ...

  2. [zz]android的logcat详细用法

    Android日志系统提供了记录和查看系统调试信息的功能.日志都是从各种软件和一些系统的缓冲区中记录下来的,缓冲区可以通过 logcat 命令来查看和使用.      一.使用logcat命令的目的: ...

  3. hdoj 4883 TIANKENG’s restaurant【贪心区间覆盖】

    TIANKENG’s restaurant Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/O ...

  4. cf493A

    Description Vasya has started watching football games. He has learned that for some fouls the player ...

  5. 自己动手画一个HTML5的按钮

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. 【设计模式 - 15】之解释器模式（Interpreter）

    1      模式简介 解释器模式允许我们自定义一种语言,并定义一个这种语言的解释器,这个解释器用来解释语言中的句子.由于这种模式主要用于编译器的编写,因此在日常应用中不是很常用. 如果一种特定类型的 ...

  7. 几个 PHP 的“魔术常量”

    PHP 向它运行的任何脚本提供了大量的预定义常量.不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了. 有八个魔术常量它们的值随着它们在 ...

  8. eclipse运行项目特别慢，出现Java heap space溢出

    在eclipse中可用为JVM设置参数:Window-->Preferences-->Java-->Installed JREs然后选中你安装的jre-->Edit--> ...

  9. android 52 粘滞广播

    粘滞广播:广播发送出去以后,广播接收者还没有创建,当广播接收者注册的时候就可以接收,如果不是粘滞广播则如果没有广播接收者就以后不能再接收了. mainActivity: package com.sxt ...

  10. hadoop资料汇总（网上）

    http://blog.csdn.net/fansy1990/article/list/3      全部是hadoop的,挺好. http://stackoverflow.com/          ...