子元素设置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. Web | JavaScript的引用数据类型强制转换类型

    我在这里主要的想提下的是JavaScript中的引用类型进行强制转换类型.因为对于基本数据类型的变换大多都是雷同的,很容易熟知,但是引用数据类型有一点小插曲. JavaScript的引用类型主要为对象 ...

  2. react 配置开发环境

    一:先自行下载安装node和npm 二:cnpm install create-react-app -g 三:create-react-app my-project 四:cd my-project  ...

  3. 详解Map集合体系及方法entrySet、keySet、values

    简单回顾Map集合: Map表示映射关系,以键值对的方式来保存数据.key和value一一对应.key是唯一的,不可重复,而value是可重复的,可以被多个key关联.虽然Map是放入两个数据,但是却 ...

  4. 初识shell

    shell简介 在计算机科学中,Shell俗称壳(用来区别于核),Shell 是一个 C 语言编写的脚本语言,它是用户与 Linux 的桥梁,用户输入命令交给 Shell 处理, Shell 将相应的 ...

  5. Node调试

    之前调试node代码简单粗暴,直接在代码打印日志,控制台观察日志,效率低下~ 原来后端node代码也可以通过Chrome断点调试,以下是调试方法. (1)找到node启动的进程 ps aux|grep ...

  6. hadoop生态搭建（3节点）

    软件:CentOS-7    VMware12    SSHSecureShellClient shell工具:Xshell 规划 vm网络配置 01.基础配置 02.ssh配置 03.zookeep ...

  7. helpera64开发板下制作ubuntu rootfs镜像（二）

    上一篇路径:https://www.cnblogs.com/jizizh/p/10380513.html Helpera64开发板ubuntu剩于工作: 1.背光调节 答:/sys/class/bac ...

  8. hadoop运维笔记

    一. 故障处理部分 1.1. spark提交任务报错java.lang.NoClassDefFoundError: com/alibaba/fastjson/JSON   报错原因: 在运行环境没有找 ...

  9. 20155203 《信息安全技术》 实验2 Windows口令破解

    实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 系统环境 Windows 实验工具 LC5 SuperDic(密码字典生成器) 实验原理 口令破解方法 口 ...

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

    20155222 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,开发人员使用JDBC的标 ...