有些情况下，我们设定父元素下的子元素margin值时，父元素会被影响。

这是个常见问题，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。

例如：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">
　　　　　　　　　body,html{
　　　　　　　　　　　background:green;
　　　　　　　　　}

             #box{

                 width: 400px;

                 height: 400px;

                 background: red;

             }

             #main{

                 width: 100px;

                 height: 100px;

                 background: yellow;

                 margin: 50px;

             }

         </style>

     </head>

     <body>

         <div id="box">

             <div id="main">

             </div>

         </div>

     </body>

 </html>

为了清楚，我这里将body背景色改为绿色，我们会发现，父元素被改变了，虽然并没有在数值上做出改变，但是样式确实是发生了变化，那么我们进行如下操作进行消除子元素对于父元素的影响。

对父元素增加CSS代码：

overflow:hidden;

怎么会出现这个问题呢？我也是在网上看了好多，挑选了一个我觉得说的而比较靠谱的原因。

“这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。”

说的白话一点就是，如果你什么都没有进行操作的话，子元素文本节点会对上级“找麻烦”；所以，对父元素增加代码overflow：hidden。

文章部分来自http://blog.csdn.net/u012011360/article/details/41823125

子元素设定margin值会影响父元素的更多相关文章

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

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

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

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

  3. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

  4. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  5. 子元素margin-top为何会影响父元素？

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

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

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

  7. 解决子元素设置margin-top，效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  8. 子元素增加margin-top会增加给父元素的问题

    假设我们有如下代码 <div id="father" style="height:400px;width:400px;background:#e4393c;&quo ...

  9. 为什么子元素设置margin-top会作用在父元素上？

    原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

随机推荐

  1. [js高手之路] 跟GhostWu一起封装一个字符串工具库-架构篇(1)

    所谓字符串工具库就是利用javascript面向对象的知识封装一个常用的字符串处理方法库,首先给这个库起个名字,好吧就叫ghostwu.js. 看下ghostwu.js的整体架构: ; (functi ...

  2. Tomcat 部署安装及JVM调优~

    Tomcat 部署Tomcat环境 环境准备 linux: CentOS 7.3 tomcat: 9.0.0.M21 jdk: 1.8.0_131 ip: 192.168.1.5 tomcat官方下载 ...

  3. ABP从入门到精通（5）：使用基于JWT标准的Token访问WebApi

    项目:asp.net zero 4.2.0 .net core(1.1) 版本 我们做项目的时候可能会遇到需要提供api给app调用,ABP动态生成的WebApi提供了方便的基于JWT标准的Token ...

  4. noip提高组1999 导弹拦截

    导弹拦截 背景 实中编程者联盟为了培养技术精湛的后备人才,必须从基础题开始训练. 描述 某国为了防御敌国的导弹袭击,研发出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任 ...

  5. iOS项目之wifi局域网传输文件到iPhone的简单实现

    如今手机发展非常迅速,app的种类也琳琅满目,而自从有了4G网之后,手机流量也越来越不够用了.所以现在越来越多的app有了本地文件的管理功能,方便用户随意浏览手机文件的同时,也为用户节约了流量的使用. ...

  6. EasyUI Datagrid 鼠标悬停显示单元格内容

    第一种方式: .js 定义函数 <script type="text/javascript"> //格式化单元格提示信息 function formatCellTool ...

  7. 【Js应用实例】javascript管理cookie

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. WeQuant交易策略—NATR

    策略名称:NATR策略关键词:规范真实波幅.价格突破. NATR,是对ATR指标进行了标准化.主要应用于了解价格的震荡幅度和节奏,在窄幅整理行情中用于寻找突破时机.本策略在当前价格高于之前价格一定倍数 ...

  9. Akka（21）： Stream：实时操控：人为中断-KillSwitch

    akka-stream是多线程non-blocking模式的,一般来说,运算任务提交到另外线程后这个线程就会在当前程序控制之外自由运行了.任何时候如果需要终止运行中的数据流就必须采用一种任务柄(han ...

  10. DotNetCore跨平台~Quartz热部署的福音～监控文件夹的变化

    在DotNetCore出来之后,同时也使用了quartz进行调度中心的设计,将它做到docker里方便部署,在之前的quartz版本里支持配置文件的方式,而现在不支持了,我们应该去想一下,为什么不去支 ...