关于子元素的margin-top属性会传给父元素的问题
2016-08-17 10:26
337 查看
问题描述:
一个父包含框包含一个子元素。给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化。
html结构:
<div class="box1"><div class="box1_1"></div></div>
css样式:
.box1{height:400px;background:#fad;}
.box1_1{height:100px;margin-top:50px;background:#ade;}
解决办法:
1.修改父元素的高度,增添padding-top样式模拟(常用);
2.为父元素添加overflow:hidden;样式即可(完美);
5.为父元素或者子元素声明浮动(可用);
3.为父元素添加border(可用);
4.添加额外的元素放在子元素最前面,设置高度为1px,overflow:hidden(若为行内元素,需要声明为块元素)(啰嗦);
6.为父元素或者子元素声明绝对定位(……)。
原理
一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
这就是原因了。“嵌套”的盒元素也算“毗邻”,也会 Collapsing Margins。这个合并Margin其实很常见,就是文章段落元素<p/>,并列很多个的时候,每一个都有上下1em的margin,但相邻的<p/>之间只会显示1em的间隔而不是相加的2em。这个很好理解,我就是奇怪为什么W3C要让嵌套的元素也共享Margin,想不出来在什么情况下需要这样的表现。 这个问题的避免方法很多,只要破坏它出现的条件就行。给Outer
Div 加上 padding/border,或者给 Outer Div / Inner Div 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)。
在 IE/Win 中如果这个盒子有 layout 那么这种现象就不会发生了:似乎拥有 layout 会阻止其孩子的边距伸出包含容器之外。此外当 hasLayout = true 时,不论包含容器还是孩子元素,都会有边距计算错误的问题出现。
转载自http://blog.csdn.net/zchcode/article/details/12967013
一个父包含框包含一个子元素。给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化。
html结构:
<div class="box1"><div class="box1_1"></div></div>
css样式:
.box1{height:400px;background:#fad;}
.box1_1{height:100px;margin-top:50px;background:#ade;}
解决办法:
1.修改父元素的高度,增添padding-top样式模拟(常用);
2.为父元素添加overflow:hidden;样式即可(完美);
5.为父元素或者子元素声明浮动(可用);
3.为父元素添加border(可用);
4.添加额外的元素放在子元素最前面,设置高度为1px,overflow:hidden(若为行内元素,需要声明为块元素)(啰嗦);
6.为父元素或者子元素声明绝对定位(……)。
原理
一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
这就是原因了。“嵌套”的盒元素也算“毗邻”,也会 Collapsing Margins。这个合并Margin其实很常见,就是文章段落元素<p/>,并列很多个的时候,每一个都有上下1em的margin,但相邻的<p/>之间只会显示1em的间隔而不是相加的2em。这个很好理解,我就是奇怪为什么W3C要让嵌套的元素也共享Margin,想不出来在什么情况下需要这样的表现。 这个问题的避免方法很多,只要破坏它出现的条件就行。给Outer
Div 加上 padding/border,或者给 Outer Div / Inner Div 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)。
在 IE/Win 中如果这个盒子有 layout 那么这种现象就不会发生了:似乎拥有 layout 会阻止其孩子的边距伸出包含容器之外。此外当 hasLayout = true 时,不论包含容器还是孩子元素,都会有边距计算错误的问题出现。
转载自http://blog.csdn.net/zchcode/article/details/12967013
相关文章推荐
- 关于子元素的margin-top属性会传给父元素的问题
- 子元素的margin-top属性传递给父元素的问题
- 关于子元素margin-top影响父元素位置问题
- 子元素margin-top属性传递给父元素的问题
- 元素的position:absolute;属性和margin-left:480px; margin-top:-20px配合使用
- 关于margin-top失效的一个小问题
- 子元素增加margin-top会增加给父元素的问题
- 父元素与子元素之间的margin-top问题(css hack)
- 父元素与子元素之间的margin-top问题(css hack)
- 关于firefox 中 margin-top问题
- 关于设置浮动改变行内元素display属性的问题
- 父元素与子元素之间的margin-top问题(css hack)
- 由问题第一个子元素设置margin-top不起作用引发的新发现
- margin-top越界以及所有子元素浮动后父元素高度为0且影响后续元素的问题。
- XML中关于“使用元素还是属性”的问题
- CSS中margin-top属性失效问题解决
- 关于margin-top/bottom在non-Replaced inline元素上(如span)不起作用的解释
- 关于IE处理margin和padding值超出父元素高度的问题
- 父元素与子元素之间的margin-top问题(css hack)