两个嵌套的Div,内部Div的margin-top失效
2017-12-26 10:19
197 查看
对内部的div设置margin-top时,内部对于外部的div并没有产生一个margin值,而是外部的div相对于上面的div产生了一个margin值。
实例如下:
效果图如下:
从以上效果图中可以看出,我们对 div#b 设置的 margin-top 属性没有生效,而外层 div#a 却多了个 margin-top 的效果。
这是因为嵌套div中margin-top出现转移,在部分浏览器中(目前在 IE8, chrome60.0, firefox57.0.2 这几个版本的浏览器上测试,是这样的效果,其他版本目前没有测试),两个嵌套的div,如果外层父元素div的padding值为0,那么内层div的margin-top值会转移到父元素也就是外层div身上。
解决方案:
方案1.给父元素div1设置一个padding-top值
正常的效果图如下:
方案2.
给父元素div1设置一个overflow:hidden;在不加overflow:hidden;的时候,margin-top:这个属性是认不到边的,也就是失效。除了 hidden 属性外,其他以下几个属性也是可以的:
overflow: hidden | auto | overlay | scroll
方案3.
让父元素生成一个块级格式化范围(BFC)
一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个:
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible
display中还有一些其他的属性值也是可以的,比如 table|inline-table|inline-flex 等等
实例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; padding: 0; background: blue; } #a { width: 200px; height: 200px; background: #e2e2e2; } #b { height: 100px; width: 100px; margin-top: 50px; background: black; color: red; } </style> </head> <body> <div id="a"> <div id="b"></div> </div> </body> </html>
效果图如下:
从以上效果图中可以看出,我们对 div#b 设置的 margin-top 属性没有生效,而外层 div#a 却多了个 margin-top 的效果。
这是因为嵌套div中margin-top出现转移,在部分浏览器中(目前在 IE8, chrome60.0, firefox57.0.2 这几个版本的浏览器上测试,是这样的效果,其他版本目前没有测试),两个嵌套的div,如果外层父元素div的padding值为0,那么内层div的margin-top值会转移到父元素也就是外层div身上。
解决方案:
方案1.给父元素div1设置一个padding-top值
#a { width: 200px; height: 200px; background: #e2e2e2; padding-top: 1px; }
正常的效果图如下:
方案2.
给父元素div1设置一个overflow:hidden;在不加overflow:hidden;的时候,margin-top:这个属性是认不到边的,也就是失效。除了 hidden 属性外,其他以下几个属性也是可以的:
overflow: hidden | auto | overlay | scroll
#a { width: 200px; height: 200px; background: #e2e2e2; overflow: hidden; }
方案3.
让父元素生成一个块级格式化范围(BFC)
一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个:
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible
display中还有一些其他的属性值也是可以的,比如 table|inline-table|inline-flex 等等
相关文章推荐
- 小菜学习日记—div嵌套导致子区域margin-top失效问题(外边距合并问题)
- margin-top失效, css + div 布局之 CSS盒模型 外边距合并问题 问题表述: 那天晚上一个同学给我发来一个问题,原型大概是“一个maindiv嵌套了一个div.class="he
- div中嵌套div中使用margin-top失效问题
- Css嵌套DIV,内层DIV设置margin-top失效的解决办法(转)
- div标签中的元素margin-top失效的解决方法
- margin-top失效, css + div 布局之 CSS盒模型 外边距合并问题
- div标签中的元素margin-top失效
- div嵌套后margin出现失效(转移)的问题
- div嵌套引起的margin-top不起作用(子div设定margin-top,导致父div与其他元素有间隙)
- div内部的div margin-top 上层div动了 本身自身没动
- div嵌套引起的margin-top不起作用
- div嵌套时,内部div使用margin引发的问题
- 盒子嵌套内盒margin-top失效解决方案
- div嵌套内层div的margin-top转移给外层div的解决办法
- DIV多层嵌套margin-top的BUG问题
- div嵌套引起的margin-top不起作用
- FF浏览器嵌套div中margin-top转移问题的解决办法
- Div嵌套引起子元素的margin-top不起作用
- 关于DIV多层嵌套的margin-top的BUG
- div里面的margin-top失效