margin-top 为什么会影响父元素的 margin-top

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分隔。

2.解决方法：

　　1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
　　2、为父元素添加overflow：hidden；样式即可（完美）
　　3、为父元素或者子元素声明浮动（float：left；可用）
　　4、为父元素添加border（border:1px solid transparent可用）
　　5、为父元素或者子元素声明绝对定位

时间： 2024-08-05 00:02:03

margin-top 为什么会影响父元素的 margin-top的相关文章

子元素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; he

子元素的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

（转）MarginTop 为何影响父元素的 MarginTop

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

MarginTop 为何影响父元素的 MarginTop（转）

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

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

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

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会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class="inner"> 子元素 </div> </div> CSS代码: .demo{ width: 100%; height: 100%; background: #a4c1de; } .inner{ width: 200px; height: 200px; backgrou

子元素的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

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

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