之前在写网页的时候，发现一个小问题，就是子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. python数据类型二

    阅读目录 1.列表的去嵌套 2.元组 3.range 列表的增删改查 一,增: 注意  list和str是不一样的,lst可以发生改变,所以直接就在原来的对象上进行可操作 追加模式 lst = ['麻 ...

  2. apiDoc 入门

    网站 http://apidocjs.com/#demo Install npm install apidoc -g Run apidoc -i myapp/ -o apidoc/ -t mytemp ...

  3. 【bzoj4641】基因改造 特殊匹配条件的KMP

    题目描述 如果两个长度相等的字符串,如果存在一种字符的一一映射,使得第一个字符串的所有字符经过映射后与第二个字符串相同,那么就称它们“匹配”.现在给出两个串,求第一个字符串所有长度等于第二个字符串的长 ...

  4. 【bzoj4922】[Lydsy六月月赛]Karp-de-Chant Number 贪心+背包dp

    题目描述 给出 $n$ 个括号序列,从中选出任意个并将它们按照任意顺序连接起来,求以这种方式得到匹配括号序列的最大长度. 输入 第一行包含一个正整数n(1<=n<=300),表示括号序列的 ...

  5. 【bzoj4500】矩阵 带权并查集

    题目描述 有一个n*m的矩阵,初始每个格子的权值都为0,可以对矩阵执行两种操作: 1. 选择一行, 该行每个格子的权值加1或减1. 2. 选择一列, 该列每个格子的权值加1或减1. 现在有K个限制,每 ...

  6. 【bzoj3772】精神污染 STL+LCA+主席树

    题目描述 兵库县位于日本列岛的中央位置,北临日本海,南面濑户内海直通太平洋,中央部位是森林和山地,与拥有关西机场的大阪府比邻而居,是关西地区面积最大的县,是集经济和文化于一体的一大地区,是日本西部门户 ...

  7. 【bzoj2938】[Poi2000]病毒 AC自动机

    题目描述 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已经找出了所有的病毒代码段,试问,是否 ...

  8. 【bzoj1076】[SCOI2008]奖励关 期望dp+状态压缩dp

    题目描述 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物,每次你都可以选择吃或者不吃(必须在抛出下一个宝物之前做出选择,且现在决定不吃的宝物以后也不能再 ...

  9. Python 基本数据结构

    Python基本数据结构 数据结构:通俗点儿说,就是存储数据的容器.这里主要介绍Python的4种基本数据结构:列表.元组.字典.集合: 格式如下: 列表:list = [val1, val2, va ...

  10. Luogu1731 NOI1999生日蛋糕（搜索）

    非常经典的剪枝题然而一直没有写.感觉自己连普及组水平都没有了. 1.半径和高枚举范围满足加上后总体积不超过n且剩下每层还能放. 2.半径从大到小枚举,因为体积正比于半径平方而面积正比于半径,大的半径更 ...