有些情况下，我们设定父元素下的子元素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. # webpack 3 & React 的简单配置 。

    今天真是难过的一天

  2. selenium 相关api操作

    driver.close(); //关闭程序 driver.findElement(By.id("idExpression")); //查找单个页面元素 driver.findEl ...

  3. vue开发环境搭建及热更新

    写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...

  4. 神经网络与深度学习笔记 Chapter 3.

    交叉熵 交叉熵是用于解决使用二次代价函数时当单个神经元接近饱和的时候对权重和bias权重学习的影响.这个公式可以看出,当神经元饱和的时候,sigma的偏导接近于0,w的学习也会变小.但是应用交叉熵作为 ...

  5. .Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单

    我们在项目开发中,做得最多的可能就是CRUD,那么我们如何在ASP.NET MVC中来做CRUD呢?如果说只是单纯实现功能,那自然是再简单不过了,可是我们要考虑如何来做得比较好维护比较好扩展,如何做得 ...

  6. Hadoop2 和 Hadoop1 区别

    Hadoop2 和 Hadoop1 区别 Namenode NameNode其实是Hadoop的一个目录服务,它包含着整个集群存储的文件的元数据. 早期发行的Hadoop1版本将所有HDFS目录和文件 ...

  7. Java入门（6）——集合、基本数据类型和引用数据类型的相互转换

    集合: 1.HashMap ---->  类 概述: 通过key可以找到value, key就是键, values就是值. 俗称键值对. 特点: 无序的    值可以重复  键不可以重复的  如 ...

  8. Python之set

    set set集合,是一个无序且不重复的元素集合 set的优势 set 的访问数度快 set 原生解决数据重复问题 # 数据库中原有 old_dict = { "#1":{ 'ho ...

  9. .NET Core多平台开发体验[2]: Mac OS X

    除了微软自家的Windows平台, .NET Core针对Mac OS以及各种Linux(RHEL.Ubuntu.Debian.Fedora.CentOS和SUSE等)都提供了很好的支持,我们先来体验 ...

  10. 使用 qemu 搭建内核开发环境

    本文主要介绍在 MacOS 上使用 qemu 搭建 Linux Kernel 的开发环境.(在开始之前需要注意的是,本文中的 Linux 开发环境是一个远程服务器,而 qemu 被安装在本地的 Mac ...