子元素应该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-Type" content="text/html; charset=utf-8" />
<title>为什么子footer_top的margin-top属性错误呢?</title>
<style type="text/css">
#footer{width:1314px;height:432px;background-color:#666666; border: 1px solid #ffffff;}
#footer_top{width:1200px;height:328px;margin-top:24px;margin-left:32px;background-color:#06C;}
#footer_btm{height:90px;background-color:#3399fe;}
</style>
</head>

<body>
为什么子footer_top的margin-top属性引起父级footer margin-top属性变化呢?
    <div id="footer">
        <div id="footer_top">t</div>
        <div id="footer_btm">b</div>
    </div>
</body>
</html>

时间： 2024-10-04 23:45:19

子元素应该margin-top为何会影响父元素【转】的相关文章

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为何会影响父元素? 引用地址: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

[ jquery 过滤器 parents(expr) ] 此方法用于在选择器的基础之上搜索被选元素沿着父元素链找到符合参数的那个父元素,完成需求,如果没有参数,他会一直沿着父元素链解析到 html 标签

取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素 "!DOCTYPE html").可以通过一个可选的表达式进行筛选实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords

子元素的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-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影响父元素的解决方法

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

子元素用margin-top 为什么反而作用在父元素上？对使用margin-top 的元素本身不起作用？

在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.border边框或使用清除分离方法)结合表示为一个单独的margin.在css2.1中,水平的margin不会被折叠.垂直margin可能在一些盒模型中被折叠:1.在常规文档流中,2个或以上的块级盒模型相邻的垂直margin会被折叠.最终的margin值计算方法如下:a.全部都为正值,取最大者:b.不全是

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