子元素设定margin值会影响父元素
有些情况下，我们设定父元素下的子元素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值会影响父元素的更多相关文章
- css子元素的margin-top为何会影响父元素
详细内容请点击 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出 ...
- 子元素应该margin-top为何会影响父元素【转】
这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...
- margin折叠-从子元素margin-top影响父元素引出的问题
正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...
- 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...
- 子元素margin-top为何会影响父元素？
子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...
- 布局时margin会影响父元素
布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login&quo ...
- 解决子元素设置margin-top，效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...
- 子元素增加margin-top会增加给父元素的问题
假设我们有如下代码 <div id="father" style="height:400px;width:400px;background:#e4393c;&quo ...
- 为什么子元素设置margin-top会作用在父元素上？
原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
随机推荐
- Linux-进程描述（2）之进程标识符进程位置与环境变量
在上一篇文章中详细介绍了task_struct结构体内的常见成员,然后我们就来看一下具体内容.每个进程都把它的信息放在 task_struct 这个数据结构中,task_struct 包含了这些内容: ...
- vue.js学习之组件（下篇）
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- SQl语句收藏（转）
/* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...
- mysql my.ini配置文件修改无效,修改mysql默认字符集
问题 开始于 使用mysql命令插入中文数据插不进去 ERROR 1366 (HY000): Incorrect string value: '\xD6\xD0\xCE\xC4' for column ...
- Java 开发环境配置（Windows篇）
window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downloa ...
- C语言排序
排序算法 快速排序 C语言快速排序qsort(数组,长度,元素大小,cmp函数(*,*))//注意函数cmp的参数为指针 #include <stdio.h> #include <s ...
- java快速排序详解
快速排序 public class QuickSort { public static void main(String[] args) { int[] a = { 0, 3, 6, 8, 2, 4, ...
- Response.Write 、RegisterClientScriptBlock和RegisterStartupScript总结
Response.Write .RegisterClientScriptBlock和RegisterStartupScript总结 Page.ClientScript.RegisterStartupS ...
- java基础系列(三)---HashMap
java基础系列(三)---HashMap java基础系列 java基础系列(一)---String.StringBuffer.StringBuilder java基础系列(二)---Integer ...
- SoapUI中读取法文字符
最近测试中,使用SoapUI时需要读取excel中的法文数据作为参数,groovy script中使用的是jxl进行excel的读取, 开始时一直显示乱码,而后在script中添加如下wookbook ...