盒子嵌套内盒margin-top失效解决方案
来源:互联网 发布:网络直播平台策划方案 编辑:程序博客网 时间:2024/04/30 15:02
当两个盒子嵌套在一起时,如若内盒子顶部顶着外盒子顶部,如图:
这时如果内盒设置了margin-top属性,内盒和外盒的顶部并不会有间距,而是外盒被顶下来,好像给外盒设置了margin-top属性一样。
给内盒设置margin-top属性,如图:
给外盒设置margin-top属性和上图一样。这时如果想要让内盒设置的margin-top属性有效,可以采取以下两种方法:
1. 给外盒添加边框,只需在CSS中外盒添加一条属性:
border: 1dp solid #000;
结果如图:
2. 给外盒CSS中添加一条属性:
overflow: hidden;
结果如图:
推荐使用第二种方式,因为第一种方式会改变外盒的样式。
阅读全文
0 0
- 盒子嵌套内盒margin-top失效解决方案
- 两个嵌套的Div,内部Div的margin-top失效
- margin-top失效
- margin-top失效原因
- jq的slideToggle()在ie8里遇到bug:下盒子的margin—top失效,margin-top塌陷解决方法
- margin-top失效的解决办法
- IE8下margin-top失效
- margin-top 失效的问题
- 嵌套盒元素子元素margin-top影响父元素
- IE6、IE7中定位元素导致相邻元素margin-top失效解决方案
- 当div内嵌套子div时,margin-top合…
- margin-top塌陷现象解决方案
- Firefox下margin-top失效的问题
- Firefox下margin-top失效解决技巧
- div标签中的元素margin-top失效
- IE6/IE7下margin-top失效解决方法
- 关于margin-top失效的解决办法
- CSS中margin-top属性失效问题解决
- 【计算机未响应】apphangb1
- 日常练习之抽象类
- 交叉编译搜索不到指定文件的解决办法
- spring-boot(二) 整合jpa
- css3动画属性详解之transform、transition、animation
- 盒子嵌套内盒margin-top失效解决方案
- 研究生如何发表论文必读
- 自定义控件三部曲之动画篇(一)——alpha、scale、translate、rotate、set的xml属性及用法
- centOS7 下Nginx的简单安装配置
- Spring MethodInvokingFactoryBean注入Method值
- SourceTree最新使用方法以及github多人开发方法
- 记忆网络之Dynamic Memory Networks模型介绍及代码实现
- 关于主从集群
- 人工智能进入新的发展阶段