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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    div{

      background: blue;

      width: 200px;

      height: 200px;

    }

    p{

      background: red;

      width: 50px;

      height: 50px;

      margin-top: 30px;

    }

  </style>

</head>

<body>

<div>

  <p></p>

</div>

</body>

</html>

div没有margin-top:30px，但是页面上显示的结果确是像margin-top应用到了div上一般，div下移而p没有。

原因是因为

当一个元素包含在另一个元素中时，假设没有内边距padding或边框border把外边距分隔开，它们的上和/或下外边距也会发生合并。请看下图

再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。

对于垂直外边距合并的解决方案上面已经解释了，为父元素增加一个border-top或者padding-top即可解决这个问题。（引用https://www.hicss.net/do-not-tell-me-you-understand-margin/这篇文章的话）

 div{

      background: blue;

      width: 200px;

      height: 200px;

      border-top: 1px solid #ccc;//新增

    }

子元素设置margin-top后，父元素跟随下移的问题的更多相关文章

  1. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  2. 给HTML页面指定元素添加属性，添加父元素

    给HTML页面指定元素添加属性,添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img   此处用到querySelectorA ...

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

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

  4. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  5. 子元素margin-top为何会影响父元素？

    子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...

  6. 当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...

  7. 布局时margin会影响父元素

    布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login&quo ...

  8. 元素设置disabled属性后便无法向后台传值

    元素设置disabled属性后便无法向后台传值

  9. Atitit.判断元素是否显示隐藏在父元素 overflow

    Atitit.判断元素是否显示隐藏在父元素 overflow 1.1. scrollTop  指的是元素的滚动条顶端距离原生基线的高度...1 1.2. 判断元素是否显示隐藏在父元素  $(next) ...

  10. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. NOIP Day1总结

    Day1T1玄学考试 在开始之前,我犯了考前综合症,各种不安各种焦躁. 结果当我去到考场的时候,看了T1...... T1:road 这不是裸的原题么这!我当时心里瞬间想到积木大赛.这明显就是积木大赛 ...

  2. MySQL学习【第十二篇事务中的锁与隔离级别】

    一.事务中的锁 1.啥是锁? 顾名思义,锁就是锁定的意思 2.锁的作用是什么? 在事务ACID的过程中,‘锁’和‘隔离级别’一起来实现‘I’隔离性的作用 3.锁的种类 共享锁:保证在多事务工作期间,数 ...

  3. Java中的代码块：局部代码块、构造代码块和静态代码块

    代码块 java代码中用{ }括起来的代码段叫做代码块 1.局部代码块 在局部位置,用于限定变量的生命周期 例如,下面代码中的a仅在代码块中起作用,因此会编译报错 class Demo{ public ...

  4. Font Awesome图标字体

    1.unicode unicode是字体在网页端最原始的应用方式,特点是: 兼容性最好,支持ie6+,及所有现代浏览器. 支持按字体的方式去动态调整图标大小,颜色等等. 但是因为是字体,所以不支持多色 ...

  5. 使用babel插件集

    1).打开配置文件".babelrc",配置插件集,代码如下: { "presets":["latest"] } 2).安装babel插件集 ...

  6. mac安装配置mysql

    目录 mac安装配置mysql 1.mysql的安装 2.设置root用户的密码 3.分别执行一下命令 4.配置mysql环境变量 mac安装配置mysql 1.mysql的安装 ​ 安装过程十分简单 ...

  7. 【JVM】TroubleShooting之内存溢出异常(OOM)与调优

    1. OOM概述 If your application's execution time becomes longer and longer, or if the operating system ...

  8. python3使用bencode库实现BT种子生成磁力链接

    python3 需要使用 pip install py3-bencode安装py3-bencode库. pip install py3-bencode 这里使用当前目录下的 1.torrent 文件转 ...

  9. 20155202 2016-2017-2 《Java程序设计》第4周学习总结

    20155202 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 继承与多态: 子类和父类有(is a)关系,Role role1 =new Swordsma ...

  10. 20155306 2016-2017-2《Java程序设计》课程总结

    20155306 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 •预备作业1:对自己专业看法及.学习Java的期望,以及心中的师生关系. •预备作业2:C ...