之前在写网页的时候，发现一个小问题，就是子div设置margin-top的时候，父的div也会跟着向下移动。我用代码和图描述一下问题：

  1. <span style="font-size:14px;"><style>
  2. *{margin:0;padding:0;}
  3. .div1{background:green;height:100px;}
  4. .div2{background:darkblue;height:100px;}
  5. .subDiv{background:red;height:40px;}
  6. </style>
  7. <body>
  8. <div class="div1"></div>
  9. <div class="div2">
  10. <div class="subDiv"></div>
  11. </div>
  12. </body></span>

效果是：

红色div是蓝色div的子div。然后我设置红色div的margin-top为20px;

结果如下：

可以看到，设置margin-top之后，父div跟着子div向下移动了。（白色层为空白处，非div层）

解决这个问题的方法是，为父div设置border。为此，我为父div设置border-top:1px solid darkblue;

结果显示：

可以看到，子div向下移动了，但是父div并没有向下移动。

网上找到的原理：

一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

虽然可以通过给父div添加border可以解决问题，但是总觉得不太好。每次为了实现这样的效果而设置border-top，好像有点累赘。后来在网上看了一些博文，觉得很不错。大概的意思是：margin是用于隔开两个独立元素，而padding用域隔开元素及其元素内部内容。其实子div相当于父div的内容，为了使元素和内容隔开，可以使用padding。

于是，我在父div里面设置了padding-top,也达到了目的

子div设置margin-top使得父div也跟着向下移动的更多相关文章

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

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

  2. 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...

  3. 子div块中设置margin-top时影响父div块位置的解决办法

    在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...

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

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

  5. 子元素设置margin-top后，父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

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

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

  7. css-子div设置margin-top后，父div与子div一起下移

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

  8. 子DIV块中设置margin-top时影响父DIV块位置的解决办法？

    解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...

  9. 子div块中设置margin-top时影响父div块位置的解决办法及其原因

    解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...

  10. 如何解决css-子div设置margin-top后，父div与子div一起下移的bug?

    根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠. 这是规范引起的普遍问题. 只要给父盒子设 ...

随机推荐

  1. week1 技术随笔

    类别c 内容c 开始时间s 结束时间e 被打断时间I 总计(min) 9.5 随笔 构建之法福后感 22:00 24:00 7 113 9.6 分析 需求分析 9:00 9:30 2 28 编码 词频 ...

  2. [Redis]在Windows下的下载及安装

    1.下载 下载地址: https://github.com/MSOpenTech/redis, 下载并解压到特定的目录. 2.启动Redis服务端 CMD -> redis-server.exe ...

  3. python json 序列化

    如果我们要在不同的编程语言之间传递对象,就必须把对象序列化为标准格式,比如XML,但更好的方法是序列化为JSON,因为JSON表示出来就是一个字符串,可以被所有语言读取,也可以方便地存储到磁盘或者通过 ...

  4. C++基础知识（一）

    C++中头文件中class的两个花括号后面要加上分号,否则会出现很多的莫名奇妙的错误. 一. 每一个C++程序(或者由多个源文件组成的C++项目)都必须包含且只有一个main()函数.对于预处理指令, ...

  5. BZOJ 1834 网络扩容(最大流+费用流)

    对于第一问,直接求最大流. 对于第二问,建源点s和汇点t,s连1容量为INF,费用为0的边,n连t容量为最大流+k,费用为0的边.这样就把最大流限制为最多增加k了. 限制需要求扩充的最小费用,原图的边 ...

  6. 详解 ES6 Modules

    详解 ES6 Modules 对于新人朋友来说,想要自己去搞定一个ES6开发环境并不是一件容易的事情,因为构建工具的学习本身又是一个非常大的方向,我们需要花费不少的时间才能掌握它. 好在慢慢的开始有大 ...

  7. 【题解】Atcoder ARC#85 E-MUL

    ……没啥可说的.最大权闭合子图,跑下dinic就好了…… #include <bits/stdc++.h> using namespace std; #define maxn 500000 ...

  8. CF724E Goods transportation 最小割 DP

    照惯例CF的题不放原题链接... 题意:一个序列上有n个点,每个点有权值pi和si.表示这个点一开始有pi个物品,最多可以卖出si个物品,每个点都可以把物品向编号更大的点运输,但是对于i < j ...

  9. [bzoj4398] 福慧双修 最短路 二进制分组

    ---题面--- 题解: 考场上看的这道题,,,当时70分算法打挂了,今天才知道这个也是原题.... 首先,对于不跟1相邻的边,肯定不会经过两次,因为经过两次就回来了,除了增加路径长度之外没有任何意义 ...

  10. ubuntu安装记录——安装作业部落cmd markdown

    安装这个折腾了一个多小时,,,, 表示是因为印象笔记没有markdown才买的作业部落cmd markdown的会员,,,,然而刚刚随意一看发现印象笔记出markdown了,,,,, 还是记录一下安装 ...