根据海玉的博客

这个问题发生的原因是根据规范，一个盒子如果没有上补白(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. [数据库]漫谈ElasticSearch关于ES性能调优几件必须知道的事(转)

    ElasticSearch是现在技术前沿的大数据引擎,常见的组合有ES+Logstash+Kibana作为一套成熟的日志系统,其中Logstash是ETL工具,Kibana是数据分析展示平台.ES让人 ...

  2. 轻量级iOS蓝牙库：LGBluetooth（项目中用过的）

    LGBluetooth 是个简单的,基于块的,轻量级 CoreBluetooth 库: iOS 6引入了Core Bluetooth,让低功耗蓝牙设备之间的通信变得简单.但如果CoreBluetoot ...

  3. PRML读书会第七章 Sparse Kernel Machines（支持向量机， support vector machine ，KKT条件，RVM）

    主讲人 网神 (新浪微博: @豆角茄子麻酱凉面) 网神(66707180) 18:59:22  大家好,今天一起交流下PRML第7章.第六章核函数里提到,有一类机器学习算法,不是对参数做点估计或求其分 ...

  4. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  5. unity3d 三分钟实现简单的赛车漂移

    提到赛车游戏,大家最关心的应该就是漂移吧?! 从学unity开始,我就一直在断断续续的研究赛车 因为自己技术太烂.悟性太差等原因,我走了不少弯路 也许你会说,网上那么多资料,你不会查啊 是啊!网上一搜 ...

  6. Nodejs基础：路径处理模块path总结

    模块概览 在nodejs中,path是个使用频率很高,但却让人又爱又恨的模块.部分因为文档说的不够清晰,部分因为接口的平台差异性. 将path的接口按照用途归类,仔细琢磨琢磨,也就没那么费解了. 获取 ...

  7. [poj 3537]Crosses and Crosses(博弈论）

    题目:http://poj.org/problem?id=3537 题意:给你n个格子,两个人依次在n个格子的任意空位置画"X",谁如果画了一个后,3个X连在了一起,那么那个人就获 ...

  8. Matlab绘图详解

    Matlab绘图 强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为高层绘图函数.此外,M ...

  9. vim 快捷键

    1.vim ~/.vimrc 进入配置文件 如果不知道vimrc文件在哪,可使用 :scriptnames 来查看 set nu #行号 set tabstop=4 #一个tab为4个空格长度 set ...

  10. getopt

    头文件 #include<unistd.h> 定义函数 int getopt(int argc,char * const argv[ ],const char * optstring); ...