子元素设置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. iOS：Masonry约束经验（19-03-21更）

    1.label约束: 1).只需约束x.y 点相关就行.宽高 长度相关不用约束,就算用boundingRectWithSize计算出来的,也可能不准. 如:top.bottom二选一,trailing ...

  2. nodejs（ koa2 ）配置 browserHistory

    前言 既然能搜到并且还点进来看这篇文章, 那么肯定是知道后台为什么要配置 browserHistory, 也肯定知道为什么非要去用相对来说更麻烦的吧browserHistory, 而不用更简单点的不需 ...

  3. (Oracle)DBMS_SYSTEM工具-01[20180510]

    分析描述:     使用DBMS_SYSTEM分析SQL语句执行,并且获取SQL会话中的绑定变量.等待事件.消耗资源和执行计划等等. 环境介绍:     Oracle 11.2.0.4.0     L ...

  4. jQuery增减类操作代码

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. echarts踩坑---容器高度自适应

    在echarts中,若设置固定高度,当柱状图数据过多时会出现数据相互挤压,给用户的体验十分糟糕,可以通过给容器设置自适应高度,然后通过getDom()的方法解决此问题. 具体解决办法如下: <d ...

  6. Python学习之——Python安装

    环境:Centos6.5+python2.7.5 1.centons6.5系统中是已经安装了python的,先查看版本是不是需要的 python --version 2.安装一些必要的包,防止后面需要 ...

  7. 10 Quality Free Flat Icon Sets for Your Designs

    Subscribe It’s clear that flat design has gained great popularity in recent years. This is hardly su ...

  8. 20170607 JDBC课堂实践 任务四

    20170607 JDBC课堂实践 任务四 题目 查询world数据库,查询哪个国家的平均寿命最长. 码云链接 SQL语句 SELECT Code, Name, LifeExpectancy FROM ...

  9. 20155322 2017-2018-1 《信息安全系统设计》第五周 MyBash实现

    #20155322 2017-2018-1<信息安全系统设计>第五周 MyBash实现 [博客目录] 实现要求 相关知识 bash fork exec wait 相关问题 fork返回两次 ...

  10. 2017-2018-1 20155323《信息安全技术》实验二 Windows口令破解

    2017-2018-1 20155323<信息安全技术>实验二 Windows口令破解 实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 系统环 ...