【MarginTop 为何影响父元素的 MarginTop（转）】的更多相关文章

（转）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”属性,一切如预期.但…

CSSmargin击穿问题（子元素margin-top会影响父元素）

最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑.唉,有些东西不用就忘. 一.问题描述 <div class="container"> <div class="children">子元素</div> </div> .container { background-color: rgb(226, 43, 89); } .children { background-colo…

子元素的margin-top会影响父元素

---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了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 tw…

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…

子元素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影响父元素定位

写样式时无意中发现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…

[css]当父元素的margin-top碰上子元素的margin-top

出现条件:父元素和子元素都设置了margin-top 现象:子元素的margin-top可能会失效,导致父元素和子元素粘连在一起 解决方法: 1.给父元素加padding-top:1px. 2.给父元素加border:1px solid transparent 3.给父元素加float:left 4.给父元素加overflow:hidden(我觉得最好的) 5.给子元素加display:inline-block…

子元素设置margin-top后，父元素跟随下移的问题

子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background: blue; width: 200px; height: 200px; } p{ background: red;…

布局时margin会影响父元素

布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login"> 12345 </div></div><style>.login-bg{ background-color:red; width: 400px; height: 400px; margin: 0 auto; background: url(imac.png) n…