有些情况下，我们设定父元素下的子元素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. c++类大小问题

    1.空类 class A { }; 解析:类的实例化就是为每个实例在内存中分配一块地址:每个类在内存中都有唯一的标识,因此空类被实例化时,编译器会隐含地为其添加一个字节,以作区分. 2.虚函数类 cl ...

  2. 爬取西刺ip代理池

    好久没更新博客啦~,今天来更新一篇利用爬虫爬取西刺的代理池的小代码 先说下需求,我们都是用python写一段小代码去爬取自己所需要的信息,这是可取的,但是,有一些网站呢,对我们的网络爬虫做了一些限制, ...

  3. 打造基于Clang LibTooling的iOS自动打点系统CLAS（一）

    1. 手动打点的弊端 在很多ios工程师的日常工作中,不但要对接产品提出的功能性需求,还会收到产品出于数据统计分析需求目的而提出的附带的隐形需求:统计打点.大多数公司的基础框架层都会对统计打点功能做高 ...

  4. 内存数据库之Apache Ingite

    上一篇文章,我们做了内存数据库的技术选型: 内存数据库技术选型 本文中,我们继续深入研究Apache Ignite,同时分享一些我们.Net的编码实践. 首先,Apache Ignite是一个内存数据 ...

  5. C# 实例练习（第二天）

    实例练习 1. 完成简单登录效果,设置用户登录账号密码,清空控制台,进入登录页面,请求用户输入账号.密码和验证码(随机产生),并判断用户输入的信息,给出相应的提示. C#代码如下: 主要知识点: (1 ...

  6. SQLite在C#中的安装与操作

    SQLite 介绍 SQLite,是一款轻型的数据库,用于本地的数据储存. 先说说优点,它占用资源非常的低,在嵌入式设备中需要几百K的内存就够了:作为轻量级数据库,他的处理速度也足够快:支持的的容量级 ...

  7. Java温故而知新-插入排序

    插入排序 插入排序的基本思想是将待排序的元素依次插入序列合适的位置,然后将这个位置后面的元素依次向后移动一位 位置1 2 3 4 5 6 序列5 4 2 1 8 3 设第1位为最初始的基础元素,也就是 ...

  8. JS中的循环结构

    [循环结构的执行步骤]1.声明循环变量:2.判断循环条件3.执行循环体操作4.更新循环变量然后循环执行2-4,直到条件不成立时,跳出循环.while循环()中的表达式,运算结果可以是各种类型,但是最终 ...

  9. android monkey测试学习

    前提是:有安卓环境,能用adb命令 一.Monkey 测试的目的? 该工具可用于测试稳定性. 开发人员结合monkey 打印的日志 和系统打印的日志,解决测试中出现的问题 二.Monkey 测试的特点 ...

  10. TCON板新选择--NCS8807 LVDS转mLVDS芯片

    NCS8807 LVDS-to-mLVDS w/ Scaler (4K TCON w/ Scaler) General Description NCS8807 is an LVDS 4K TCON w ...