子元素设置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. 这次的PION的总结

    这次的PION的总结 果然不出所料,才\(129\)分. 同级的巨佬们\(170,180,\color {red}{280}\)\(\small{wc这什么神仙啊QAQ}\),都比我强 那我还有什么可 ...

  2. 校内胡策 T9270 mjt树

    题目背景 从前森林里有一棵很大的mjt树,树上有很多小动物. 题目描述 mjt树上有 n 个房间,第 i 个房间住着 ai 只第bi 种小动物. 这n个房间用n-1条路连接起来,其中房间1位mjt树的 ...

  3. C++ primer第三章作业

    3.1节 练习3.1: 使用恰当的using声明重做1.4.1节(第11页)和2.6.2节(第67页)的练习 #ifdef 1 #include <iostream> using std: ...

  4. python正则中如何匹配汉字以及encode(‘utf-8’)和decode(‘utf-8’)的互转

    正则表达式: [\u2E80-\u9FFF]+$ 匹配所有东亚区的语言  [\u4E00-\u9FFF]+$ 匹配简体和繁体  [\u4E00-\u9FA5]+$ 匹配简体  <input ty ...

  5. 在AI人工智能中如何巧妙学习大数据编程，成为五十万年薪的佼佼者

    编辑 ai狗年 大数据和人工智能的关系,首先要说什么是大数据.这些年来,大数据先是被神化,继而又被妖魔化,到了今天,其实谁也不知道别人所谓的大数据指的是什么.我大数据从业者,建了一个大数据资源共享群1 ...

  6. LFS搭建第一天

    1. 前期准备 vmware 软件安装 LFS iso 下载:http://ftp.osuosl.org/pub/lfs-livecd/lfslivecd-x86-6.3-r2145.iso 2.新建 ...

  7. Asp.Net Core跨域配置

    在没有设置跨域配置的时候,Ajax请求时会报以下错误 已拦截跨源请求:同源策略禁止读取位于 http://localhost:5000/Home/gettime 的远程资源.(原因:CORS 头缺少 ...

  8. SQL学习笔记：函数

    SQL函数 AVG select AVG(col) AS avgvalue from tablename select col2 from tablename where col1>(selec ...

  9. SDR软件无线电知识要点（三）EVM

    SDR软件无线电知识要点(三)EVM 信号质量如何评估 Noise Figure (NF) or sensitivity and Error Vector Magnitude (EVM) provid ...

  10. String in Java