有些情况下，我们设定父元素下的子元素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. ueditor单独调用上传附件和图片的功能

    javascript富文本编辑器使我们添加.编辑网站中的文章更加方便和容易.这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以 ...

  2. linux压缩解压命令

    -c: 建立压缩档案  -x:解压  -t:查看内容  -r:向压缩归档文件末尾追加文件  -u:更新原压缩包中的文件  这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一 ...

  3. WeQuant交易策略—Dual Thrust

    Dual Thrust策略 策略介绍 Dual Thrust是一个趋势跟踪系统,由Michael Chalek在20世纪80年代开发,曾被Future Thruth杂志评为最赚钱的策略之一. Dual ...

  4. Andrew Ng机器学习课程笔记--week11（图像识别&总结划重点）

    一.内容概要 Photo OCR Problem Decription and pipeline(问题描述和流程图) Sliding Windows(滑动窗口) Getting Lots of Dat ...

  5. Atomic类和CAS

    说Atomic类之前,先聊一聊volatile. 对volatile的第一印象就是可见性.所谓可见性,就是一个线程对共享变量的修改,别的线程能够感知到. 但是对于原子性,volatile是不能保证的. ...

  6. hdu 5040 Instrusive

    Instrusive Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Tota ...

  7. 图标字体库（用CSS样式生成搜索、购物车等图标）

    参考网址:http://fontawesome.dashgame.com/ 基本图标: 您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称. Font ...

  8. JVM内存模型与GC算法

    1.JVM内存模型 JVM内存模型如上图,需要声明一点,这是<Java虚拟机规范(Java SE 7版)>规定的内容,实际区域由各JVM自己实现,所以可能略有不同.以下对各区域进行简短说明 ...

  9. LVS-DR实现web调度模式

    author:JevonWei 版权声明:原创作品 实现LVS-DR调度web模式 拓扑环境 网络环境 RS1 RIP 192.168.198.138/24 VIP 192.168.198.100/3 ...

  10. 第2阶段——编写uboot之编译测试以及改进(3)

    编译测试: 1.将写好的uboot复制到linux下面 2.make编译,然后将错误的地方修改,生成boot.bin (编译出错的解决方案:http://www.cnblogs.com/lifexy/ ...