子元素设置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. Autolayout中Hugging和Compression使用注意

    前言 本文主要侧重Autolayout使用过程中,通过代码和SB添加含有intrinsicSize属性控件约束的一些细节. 来自我的博客,欢迎访问:To Be Independent. Hugging ...

  2. navicat mysql 存储过程

    存储过程如同一门程序设计语言,同样包含了数据类型.流程控制.输入和输出和它自己的函数库. 一.基本数据类型:略 二.变量: 自定义变量:DECLARE   a INT ; SET a=100; 可用以 ...

  3. MySQL学习之路(一)——初涉MySQL。

    MySQL学习之路(一) 1.1MySQL的概述 MySQL由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一个开源的关系型数据库管理系统. MySQL分为社区版和企业版. 1 ...

  4. Linux基础-1.Linux命令及获取帮助

    1.Linux命令的格式 1)了解Linux命令的语法格式: 命令 [选项] [参数] 2)掌握命令格式中命令.选项.参数的具体的含义 a)命令:告诉Linux(UNIX)操作系统做(执行)什么 b) ...

  5. Redis笔记 -- make编译安装报错记录2则（一）

    1.Redis的获取与安装,目前最新稳定版本为4.0.10 Redis:  https://redis.io/download GitHub:  https://github.com/antirez/ ...

  6. UVA 400 - Unix ls (Unixls命令)

    csdn : https://blog.csdn.net/su_cicada/article/details/86773007 例题5-8 Unixls命令(Unix ls,UVa400) 输入正整数 ...

  7. WPF MVVM从入门到精通3：数据绑定

    原文:WPF MVVM从入门到精通3:数据绑定   WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通3:数据绑定 WPF ...

  8. P2P平台投宝金融跑路？为什么我没有中雷！

    编者按:市场有风险,投资需谨慎.最近,安徽合肥P2P平台"投保金融"跑路倒闭了. 今天(2016年11月8日)下午,在朋友圈看到一个分享,投宝金融跑路了,新闻媒体已经传开了. 这个 ...

  9. Spring学习(二)-----eclipse新建spring项目

    一:准本工作(下载需要的jar包) 1.下载准备Spring-framework-4.2.0 链接为: http://repo.springsource.org/libs-release-local/ ...

  10. XAF-如何改变列表点击时的默认行为

    在 Windows 窗体应用程序中,按下回车或双击列表会打开默认的详细视图. 在 ASP.NET Web 应用程序中,单击对象时执行此操作. 这一行为是由 ListViewProcessCurrent ...