1.原因:

 In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

----所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、 Padding或Border分隔。

2.解决方法:

  1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
  2、为父元素添加overflow:hidden;样式即可(完美)
  3、为父元素或者子元素声明浮动(float:left;可用)
  4、为父元素添加border(border:1px solid transparent可用)
  5、为父元素或者子元素声明绝对定位

margin-top 为什么会影响父元素的 margin-top的更多相关文章

  1. 布局时margin会影响父元素

    布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login&quo ...

  2. 子元素margin-top为何会影响父元素?

    子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...

  3. CSSmargin击穿问题(子元素margin-top会影响父元素)

    最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑.唉,有些东西不用就忘. 一.问题描述 <div class="container& ...

  4. css子元素的margin-top为何会影响父元素

    详细内容请点击 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出 ...

  5. 子元素的margin-top影响父元素原因和解决办法

    这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...

  6. (转)MarginTop 为何影响父元素的 MarginTop

    这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...

  7. 子元素应该margin-top为何会影响父元素【转】

    这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...

  8. MarginTop 为何影响父元素的 MarginTop(转)

    add by zhj: 没找到原文 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心 ...

  9. 子元素应该margin-top影响父元素的解决办法

    在子元素设置margin-top,有时会带着父元素一起移动. 原因: Outer Div [margin: 0 auto] Inner Div [margin-top: 10px] 根据CSS2.1盒 ...

  10. 子元素的margin-top会影响父元素

    ---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了margin-top,于是百度之后发现了原因. 在css2.1盒模型中 In this specific ...

随机推荐

  1. 作为一个新人,怎样学习嵌入式Linux?

        作为一个新人,怎样学习嵌入式Linux?   在学习嵌入式Linux之前,肯定要有C语言基础.汇编基础有没有无所谓(就那么几条汇编指令,用到了一看就会).尝试着写一些C语言竞赛的题目.它们是纯 ...

  2. filter 中用spring StopWatch 监控请求执行时间

    在filter中用spring stopWatch 来统计每个请求的执行时间: 虽然在firefox 中可以清楚的看到每个请求的执行时间,但是为了测试,记录日志, 方便以后查询维护. 还是必要的,下面 ...

  3. android ListView详解(转)

    在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示.抽空把对ListView的使用做了整理,并写了个小例子,如下图. 列表的显示需要三 ...

  4. php-fpm.conf配置说明(重点要改动和优化的地方)

    <?xml version="1.0" ?> <configuration> All relative paths in this config are r ...

  5. electron 缓存目录 禁用缓存

    C:\Users\Administrator\AppData\Roaming\linksame // 禁用缓存 app.commandLine.appendSwitch("--disable ...

  6. hihocoder 1032 manachar 求回文串O(n)

    #include <cstdio> #include <iostream> #include <algorithm> #include <queue> ...

  7. jquery easyui 全部图标

    所有的图标在 jquery-easyui-1.2.6\themes\icons 目录下, 在icon.css定义的如何引用 jquery-easyui-1.2.6/themes/icon.css .i ...

  8. Python+Selenium框架unittest执行脚本方法之discover()方法

    继续接着介绍,如何利用unittest管理和执行测试用例的问题,这里我们还是利用之前已经有的三条测试用例,如果你跳过了前面文章,请回到框架设计篇的第八篇和第七篇,里面有相关测试类的文件.本文来介绍,如 ...

  9. Oracle pipe

    初次接触到Report ,看到了它背后复杂的SQL操作, 首先看到了一个Pipe,先了解下PIPE的用法: 关键字PIPELINED表明这是一个oracle管道函数,oracle管道函数的返回值类型必 ...

  10. TCP/IP协议组学习笔记

    TCP/IP协议族学习笔记: 一.基础概念: (1)TCP(Transmission Control Protocol) 传输控制协议. (2)IP(Internet Protocol)网际协议.IP ...