子元素设置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. 有关集合的foreach循环里的add/remove

    转自:Hollis(微信号:hollischuang) 在阿里巴巴Java开发手册中,有这样一条规定: 但是手册中并没有给出具体原因,本文就来深入分析一下该规定背后的思考. 1 .foreach循环 ...

  2. node创建服务器

    //引入核心模块 const http = require('http'); //创建服务器 http.createServer((req,res)=>{ }).listen(3000); // ...

  3. Shell学习——子shell操作记录转储

    概述 主要介绍子shell历史操作记录的保存以及解析,比如python, scala等,用于(准)实时监控用户行为. 背景 一级shell的历史操作记录已由系统实现,当用户从开始登录shell(这里指 ...

  4. Cloudera环境搭建

    在开发阶段,可以单机搭建环境安装Flume和Solr,在两个工程的官网下载相关文件. 还有另一种更便捷的方式,就是使用Cloudera提供的镜像,包括了已经配置好的各种大数据服务环境的docker镜像 ...

  5. CAP通俗解释

    CAP原则又称CAP定理,指的是在一个分布式系统中,Consistency(一致性). Availability(可用性).Partition tolerance(分区容错性),这三个基本需求,最多只 ...

  6. Home Assistant系列--之树莓派安装Samba 和 Jupyter Notebook

    1.什么是Samba? Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在局域网上 ...

  7. Linux服务器间文件实时同步的实现

    使用场景 现有服务器A和服务器B,如果服务器A的指定目录(例如 /home/paul/rsync/ )中的内容发生变更(增删改和属性变更),实时将这些变更同步到服务器B的目标目录中(例如 /home/ ...

  8. MATLAB中常用函数及语法

    zeros() 1 zeros(n):n*n 全零矩阵 2 zeros(m,n):m*n全零矩阵 3 zeros(d1,d2,d3……dn):生成 d1*d2*d3*……*dn 全零矩阵或数组. 4 ...

  9. 20155321 2016-2017-2《Java程序设计》课堂实践项目

    20155321 2016-2017-2<Java程序设计>课堂实践项目 关于String类 split方法 charAt方法 项目题目: 模拟实现Linux下Sort -t : -k 2 ...

  10. 20155336 《Java程序设计》实验二 （Java面向对象程序设计）实验报告

    20155336 <Java程序设计>实验二 (Java面向对象程序设计)实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉 ...