这个问题会出现在所有浏览器当中，原因是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. openstack grizzly版cloud控制节点安装

    openstack-ubuntu-create 参考官方文档 三个节点:cloud :控制节点内网:10.10.10.10外网:172.16.56.252 network:网络节点内网:10.10.1 ...

  2. QT静态链接

    想把QT的程序链接成一个独立的EXE以方便使用,查了很多资料都需要自行编译QT. 搜索了很多的资料,发篇写得比较简明一些:http://my.oschina.net/weiweiqiao/blog/2 ...

  3. vim setting

    django_百度搜索 最近合并代码,发现文件缩进经常不一致,请大家把以下配置放到自己主目录下.vimrc文件中.   set tabstop=4   set shiftwidth=4   set e ...

  4. Media Queries 自适应布局展示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JAVA学习第四十七课 — IO流（一）：文件的读写

    输入流和输出流相对于内存 将外部设备的数据读取到内存中:输入 将内存中的数据写入外部设备中:输出 IO流经常使用基类 字节流的抽象基类:InputStream,OutputStream 字符的抽象基类 ...

  6. 《Linux Device Drivers》第十章 中断处理——note

    概述:系统要及时的感知硬件的状态,通常有两种方式:一种是轮询.一种是通过响应硬件中断.前者会浪费处理器的时间,而后者不会. 准备并口 在没有节设定产生中断之前,并口是不会产生中断的 并口的标准规定设置 ...

  7. C# 保存窗口为图片（保存纵断面图）

    源代码例如以下: #region 保存纵断面截图 private void button_save_Click(object sender , EventArgs e) { SaveFileDialo ...

  8. Java基础知识强化之集合框架笔记46：Set集合之TreeSet存储自定义对象并遍历练习2（自然排序：Comparable）

    1. TreeSet存储自定义对象并遍历练习2: (1)Student.java package cn.itcast_06; /* * 如果一个类的元素要想能够进行自然排序,就必须实现自然排序接口 * ...

  9. 惠普 hpssacli 工具使用

    查看raid卡信息(包括控制器状态.Cache状态.电池状态) # hpssacli ctrl all show status 查看raid详细信息 # hpssacli ctrl slot=0 sh ...

  10. 19、XHTML

    XHTML 可扩展超文本标签语言(EXtensible HyperText Markup Language). 是一种 W3C 标准. 更严格,更纯净的HTML代码. 目标是取代HTML代码. XHT ...