根据海玉的博客

这个问题发生的原因是根据规范，一个盒子如果没有上补白(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. jenkins中通过git发版操作记录

    之前说到的jenkins自动化构建发版是通过svn方式,今天这里介绍下通过git方式发本的操作记录. 一.不管是通过svn发版还是git发版,都要首先下载svn或git插件.登陆jenkins,依次点 ...

  2. Symbol ES6 新增的一种值类型数据，表示一种绝不重复的值

    let s1 = Symbol(33); let s2 = Symbol(33); alert(typeof(s1)); //数据类型判断 // alert(s1.toString()); //可把一 ...

  3. Centos5.8 安装openvpn

    安装openssl 和 openssl-devel, 建议使用最新版本, 编译安装 yum install gcc-c++ wget http://www.openssl.org/source/ope ...

  4. APMServ 支持.htaccess伪静态

    假如你的APMServ安装在X盘APMServ5.2.6目录的话请按以下步骤做. X:\APMServ5.2.6\Apache\conf\httpd.conf  文件找到你所在的虚拟目录修改以下这个地 ...

  5. windows 下 redis for php 配置

    下载 redis,下载地址 https://github.com/dmajkic/redis/downloads,下载下来 zip 文件,解压,根据系统选择解压的文件夹(比如我的是 64bit). 我 ...

  6. Canvas之蛋疼的正方体绘制体验

    事情的起因 之前写了篇谈谈文字图片粒子化 I,并且写了个简单的demo -> 粒子化.正当我在为写 谈谈文字图片粒子化II 准备demo时,突然想到能不能用正方体代替demo中的球体粒子.我不禁 ...

  7. 快速备份和还原 MySQL 数据库的另一种方法

    一直使用 SQL Server 作为公司产品的数据库来存储系统数据,所以备份还原一直都不是问题,因为 SQL Server 的备份还原非常迅速和易用.但今年公司改变策略,使用起 MySQL 数据库作为 ...

  8. redis/分布式文件存储系统/数据库 存储session，解决负载均衡集群中session不一致问题

    先来说下session和cookie的异同 session和cookie不仅仅是一个存放在服务器端,一个存放在客户端那么笼统 session虽然存放在服务器端,但是也需要和客户端相互匹配,试想一个浏览 ...

  9. ASP.NET 系列：单元测试之ConfigurationManager

    通过ConfigurationManager使用.NET配置文件时,可以通过添加配置文件进行单元测试,虽然可以通过测试但达不到解耦的目的.使用IConfigurationManager和Configu ...

  10. 理解IEnumerator+IEnumerable这种接口思想

    前言 本文不想过多篇幅来介绍IEnumerator和IEnumerable这两个接口的具体说明,只是把它作一个例子作引言而已,本文将根据自己的理解来描述微软为何要这样设计这种关联风格的接口.这种风格的 ...