盒子嵌套内盒margin-top失效解决方案
2017-10-11 17:14
232 查看
当两个盒子嵌套在一起时,如若内盒子顶部顶着外盒子顶部,如图:
这时如果内盒设置了margin-top属性,内盒和外盒的顶部并不会有间距,而是外盒被顶下来,好像给外盒设置了margin-top属性一样。
给内盒设置margin-top属性,如图:
给外盒设置margin-top属性和上图一样。
这时如果想要让内盒设置的margin-top属性有效,可以采取以下两种方法:
1. 给外盒添加边框,只需在CSS中外盒添加一条属性:
结果如图:
2. 给外盒CSS中添加一条属性:
结果如图:
推荐使用第二种方式,因为第一种方式会改变外盒的样式。
这时如果内盒设置了margin-top属性,内盒和外盒的顶部并不会有间距,而是外盒被顶下来,好像给外盒设置了margin-top属性一样。
给内盒设置margin-top属性,如图:
给外盒设置margin-top属性和上图一样。
这时如果想要让内盒设置的margin-top属性有效,可以采取以下两种方法:
1. 给外盒添加边框,只需在CSS中外盒添加一条属性:
border: 1dp solid #000;
结果如图:
2. 给外盒CSS中添加一条属性:
overflow: hidden;
结果如图:
推荐使用第二种方式,因为第一种方式会改变外盒的样式。
相关文章推荐
- jq的slideToggle()在ie8里遇到bug:下盒子的margin—top失效,margin-top塌陷解决方法
- 小菜学习日记—div嵌套导致子区域margin-top失效问题(外边距合并问题)
- 两个嵌套的Div,内部Div的margin-top失效
- margin-top失效, css + div 布局之 CSS盒模型 外边距合并问题 问题表述: 那天晚上一个同学给我发来一个问题,原型大概是“一个maindiv嵌套了一个div.class="he
- div中嵌套div中使用margin-top失效问题
- 嵌套的margin-top无效
- firefox margin-top失效的原因与解决办法
- div嵌套引起的margin-top不起作用
- DIV多层嵌套margin-top的BUG问题
- div嵌套内层div的margin-top转移给外层div的解决办法
- 【技术】ie6里position、margin-top、margin-left失效
- margin-top失效
- css中的关于margin-top,position和z-index的一些bug解决方案
- margin-top在firefox失效的原因及解决办法
- FF浏览器嵌套div中margin-top转移问题的解决办法
- 关于内层DIV设置margin-top不起作用的解决方案
- margin-top失效, css + div 布局之 CSS盒模型 外边距合并问题
- 关于子盒子模型有margin-top的时候,父盒子模型也同时拥有margin-top的解决方法
- CSS---关于内层DIV设置margin-top不起作用的解决方案
- div嵌套引起的margin-top不起作用