子元素margin-top为何会影响父元素?

子元素margin-top为何会影响父元素?

引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688

2016年10月28日 11:25:38

阅读数:6944

问题如下 
一段很简单的代码:

css如下:

<style type="text/css">
        *{
            margin: 0px; padding: 0px;
        }
        .show{
            margin: 0px auto;
            width: 200px;
            height: 100px;
            background-color: #999999;
        }
        .show h2{
            margin-top: 50px;/*important*/
            cursor: pointer;
        }
    </style>

html结构如下

<div class="show">
        <h2>crystal</h2>
    </div>

当在<h2>crystal</h2>没有设置margin-top时,浏览器显示如预期 

设置了margin-top后出现了如下所示的现象: 

我们并没有给外层的div设置margin-top,但是还是距离浏览器最顶部产生了50px的间距,查看这50px间距属于哪个元素,会发现外层div的margin依然是0 auto; 所以这个margin还是属于h2,为什么会这样?

来看css2.1盒模型中规定的内容:

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。

因为嵌套也属于毗邻,所以在样式表中优先级更高的 .show h2的margin覆盖了之前外层div定义的margin,导致最终整个div产生10px的间距。 
若给h2也添加一个class,并且在.show之前定义,则最终结果如第一个图所示,最终margin显示为0;

解决办法:

1. 父级或子元素使用浮动或者绝对定位absolute

浮动或绝对定位不参与margin的折叠

2. 父级overflow:hidden;

3. 父级设置padding(破坏非空白的折叠条件)

4. 父级设置border

原文地址:https://www.cnblogs.com/ones/p/9334968.html

时间: 2024-10-12 03:19:12

子元素margin-top为何会影响父元素?的相关文章

子元素的margin-top和margin-bottom影响父元素定位的原因和解决方法

<!DOCTYPE HTML> <html> <head> <title>margin transfer </title> <meta charset="utf-8"> <style type="text/css"> body{margin: 0;padding: 0;} .outer{width: 100px;height: 100px;background: #ccc;} .in

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

详细内容请点击 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然是CSS2.1盒模型规范……虽然很别扭,非常别扭的规定.  问题如下图,两层Div结构,Outer Div属性为“margin:0 auto”,本该紧贴外框顶部的,如果没有Inner Div,或者没有Inner Div的“margin-top”属性,一切如预期.但是当Inner Di

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

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

正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! html代码: <div id="fatherbox"> <div id="childbox">首页 </div> </div> css样式: #fatherbox{width:100%,height:64px;back

子元素的margin-top作用于外层父元素解决方法

子元素的margin-top作用于外层父元素解决方法:有时候在设置子元素的margin-top属性的时候,本来是要作用于父元素,但是表现的结果却是父元素具有了margin-top效果,下面就通过代码实例介绍一下如何解决此问题.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

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

原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> html * { margin:0; padding: 0; } </style> <body> <

子元素的margin-top影响父元素原因和解决办法

这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another

子元素使用margin-top影响父元素的解决方法

当我们给子元素使用margin-top的时候,我们会发现父元素会跟到子元素一起移动,那我们怎么样才能解决这个问题呢?很简单,我们只需在父元素中添加一个overflow: hidden;此问题即可解决.具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>

margin-top影响父元素定位

写样式时无意中发现margin-top会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class="inner"> 子元素 </div> </div> CSS代码: .demo{ width: 100%; height: 100%; background: #a4c1de; } .inner{ width: 200px; height: 200px; backgrou