之前在写网页的时候，发现一个小问题，就是子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. node.js cmd 输入npm-v无反应

    今天安装node,先是提示node版本太低.去官网更新了一下,然后 npm install -g vue-cli 结果出了个"npm ERR! errno -4048" 百度出 这 ...

  2. 在Delphi中如何获得SQL中存储过程的返回值?

    示例存储过程:create procedure proc_loginusername varchar(20),password varchar(20)asdeclare @result intsele ...

  3. 【】Python】异常处理try...except、raise

    一.try...except 有时候我们写程序的时候,会出现一些错误或异常,导致程序终止.例如,做除法时,除数为0,会引起一个ZeroDivisionError 例子: 1 2 3 4 a=10 b= ...

  4. iOS开发简单介绍

    概览 终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的iOS程序.但是这里我想强调一下,前面的 ...

  5. html页面导入文件 使用include后多出一空白行的解决

    用include引入的footer和header文件都在上面多出一空白行,是Unicode签名(bom)引起的. “标题/编码”,把 包括unicode签名(bom) 的勾取消就好了.

  6. 【题解】APIO2018 Duathlon 铁人两项

    首先对于给出的图建立圆方树,然后我们分类讨论每一个点作为中间的中转站出现的情况有多少种,累积到 \(ans\) 中. 对于圆点:在任意两个子树内分别选出一个节点都是合法的. 对于方点:连接向方点的点均 ...

  7. [JSOI2008]小店购物 & bzoj4349:最小树形图 最小树形图

    ---题面(洛谷)--- ---题面(bzoj)--- 其实是同一道题,,,样例都一模一样 题解: 一开始看想了好久,,,还想到了最短路和最小生成树,,然而写的时候才意识到最小生成树应该要用无向边 其 ...

  8. BZOJ1499：[NOI2005]瑰丽华尔兹——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1499 舞厅是一个N行M列的矩阵,矩阵中的某些方格上堆放了一些家具,其他的则是空地.钢琴可以在空地上滑 ...

  9. HDU5726：GCD——题解

    题目:hdu的5726 (我原博客的东西,正好整理过来,属于st表裸题) (可以看出我当时有多么的菜--) 这道题写了一遍,然而蒟蒻的我的时间爆炸了-- 于是看了一下学长的代码(顺便在此处%一下学长) ...

  10. 解决requests获取源代码时中文乱码问题

    用requests获取源代码时,如果是中文网页,就可能会出现乱码,下面我以中关村的网站为例: import requests url = 'http://desk.zol.com.cn/meinv/' ...