根据海玉的博客

这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。

所以解决办法：给父div设置border-top或者padding-top。

http://www.hicss.net/do-not-tell-me-you-understand-margin/

css-子div设置margin-top后，父div与子div一起下移的更多相关文章

  1. CSS子元素设置margin-top作用于父容器？

    CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

  2. 同级div设置display:inline-block，父级div强制不换行

    同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...

  3. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  4. “display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法

    最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...

  5. 子div设置浮动无法把父div撑开。

    <div class="mainBox"> <div class="leftBox"></div> <div clas ...

  6. vue $emit 父组件与子组件之间的通信（父组件向子组件传参）

    1.首先新建一个子页面为 env.vue的文件(名字这里大家可以自取) 2.然后把子页面引入父页面,代码如图: import env from '@/components/common/env' ex ...

  7. div clear清除浮动产生的影响 被受影响的div加上清除浮动后 不会填充前一个div浮动后空出的位置

  8. 【html/css】若母div设置了透明度，如何才能使得里面的子div不继承母div的透明度

    用rgba的方式给母div设置透明度的话就不会影响子div的透明度了. 例: background: rgba(51, 51, 51, 0.5);

  9. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

  10. HTML a标签如何设置margin属性(转)

    很多同学发现对DIV有效的许多CSS属性对<a>或<p>标签都无效,好比说 <div style="margin-top:5px;"></ ...

随机推荐

  1. PAT 1021. 个位数统计 (15)

    给定一个k位整数N = dk-1*10k-1 + ... + d1*101 + d0 (0<=di<=9, i=0,...,k-1, dk-1>0),请编写程序统计每种不同的个位数字 ...

  2. Java类加载和类反射回顾

    今天学习Spring,突然想重新复习一下Java类加载和类反射的.巩固一下底层原理.部分参考了李刚老师的<疯狂Java讲义>和陈雄华.林开雄的<Spring3.x企业应用开发实战&g ...

  3. Oracle XE http端口8080的修改

    Oracle Express Edition(XE)默认的http端口是8080,这跟JBoss/Tomcat的默认端口相同,导致Jboss启动冲突. 修改办法: 1. 以dba身份登录XE 2. 执 ...

  4. 大圆满的精髓–肯•威尔伯(KEN WILBER)

    作者:肯·威尔伯(Ken Wilber),目前被公认为是“后人本心理学”的最重要的思想家.理论家和发言人,其影响已经跨越了心理学领域,波及哲学和神学领域.由于肯·威尔伯在意识领域的研究极富基础性和开创 ...

  5. win7下给右键菜单添加启动cmd命令

    win7下给右键菜单添加启动cmd命令 (2013-07-20 19:20:56) 转载▼ 标签: it 右键 cmd 分类: 小软件操作技巧     最近编辑器在用windows下的gvim,但进入 ...

  6. 微软虚拟学院MVA 字幕获取方法

    微软虚拟学院(MVA)上有一些不错的视频教程,但是,蛋疼的一点那就是视频要不就慢,要不就卡,总之当你的思维跟着视频深入的时候,duang~,卡一下,说不定就要重头开始,所幸的是提供了视频下载,下载速度 ...

  7. .Net Core 自定义序列化格式

    序列化对大家来说应该都不陌生,特别是现在大量使用WEBAPI,JSON满天飞,序列化操作应该经常出现在我们的代码上. 而我们最常用的序列化工具应该就是Newtonsoft.Json,当然你用其它工具类 ...

  8. java并发：阻塞队列

    第一节 阻塞队列 1.1 初识阻塞队列 队列以一种先进先出的方式管理数据,阻塞队列(BlockingQueue)是一个支持两个附加操作的队列,这两个附加的操作是:在队列为空时,获取元素的线程会等待队列 ...

  9. 综合使用spring cloud技术实现微服务应用

    在之前的章节,我们已经实现了配置服务器.注册服务器.微服务服务端,实现了服务注册与发现.这一章将实现微服务的客户端,以及联调.实现整个spring cloud框架核心应用. 本文属于<7天学会s ...

  10. .Net下一个类型转换神器

    引言 类型转换经常遇到,最常用的应该是string类型转换为其它基元类型,常见于http参数类型转换.Convert静态类的Convert.ChangeType()方法可以把实现IConvertibl ...