根据海玉的博客

这个问题发生的原因是根据规范，一个盒子如果没有上补白(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. AFNetworking 基本使用

    AFNetwork是一个轻量级的网络请求api类库.是以NSURLConnection, NSOperation和其他方法为基础的. 下面这个例子是用来处理json请求的 3如何选择AFNetwork ...

  2. 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  3. GIT常用命令备忘

    Git配置 git config --global user.name "storm" git config --global user.email "stormzhan ...

  4. NOI2018准备Day19

    5天没写. 伸展树  主席树 3到线段树模板题

  5. 端口扫描base

    #coding:utf8 import os import socket import sys def IsOpen(ip,port): s = socket.socket(socket.AF_INE ...

  6. 阿里云安装LNMP以及更改网站文件和MySQL数据目录

    LNMP安装了哪些软件?安装目录在哪LNMP相关软件安装目录Nginx 目录: /usr/local/nginx/MySQL 目录 : /usr/local/mysql/MySQL数据库所在目录:/u ...

  7. opencv1-安装及资料

    本科用过opencv2..3.1版本,当时按照 http://wiki.opencv.org.cn/index.php/首页 上面的步骤安装的,而且使用的是IplImage和CvMat等C接口的的AP ...

  8. 我所认识的javascript正则表达式

    前言 如果说这是一篇关于正则表达式的小结,我更愿意把它当做一个手册. 目录:(点击可直达) RegExp 三大方法(test.exec.compile) String 四大护法(search.matc ...

  9. 自己存档：table 的css

    border:0;margin:0;border-collapse:collapse;border-spacing:0;

  10. 基于DDS的任意波形发生器

    实验原理 DDS的原理 DDS(Direct Digital Frequency Synthesizer)直接数字频率合成器,也可叫DDFS. DDS是从相位的概念直接合成所需波形的一种频率合成技术. ...