CSS中margin-top属性失效问题解决
来源:互联网 发布:淘宝旺旺官方买家 编辑:程序博客网 时间:2024/04/30 19:47
CSS属性有很多值得学习的地方,你对CSS中margin-top属性失效的解决方法是否熟悉,这里和大家分享一下,相信通过本文的介绍你对margin-top属性失效的解决方法一定会有深刻的认识。
关于margin-top属性失效的解决方法
常出现两种情况:
(一)margin-top失效
先看下面代码:
- <div>
- <divclassdivclass="box1">float:left</div>
- <divclassdivclass="box2">clear:both;margin-top:20px;</div>
- </div>
两个层box1和box2,box1具有浮动属性,box2没有,这时候设置box2的上边距margin-top没有效果。
网上能找到的两种比较靠谱的解释:
1:“在CSS2.1中,水平的margin不会被折叠;垂直margin可能在一些盒模型中被折叠…”
2:当第一个层浮动,而第二个没浮动层的margin会被压缩,详见--浮动元素后非浮动元素的margin的处理。
得到解决问题思路:要浮动一起浮动,要就一起不浮动。
解决办法:
1.box2增加float属性
2.box1与box2之间增加一层"<divstyle="clear:both;"></div>"
(二)子元素设置margin-top作用于父容器
- <divclassdivclass="box"style="height:100px;background:red;">
- <divclassdivclass="box2">clear:both;
- margin-top:20px;height:50px;width:500px;
- background:#000;</div>
- </div>
当给box2设置margin-top时,在FF下仅作用于父容器。
解决办法:
1.给父容器box加overflow:hidden;属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top
0 0
- CSS中margin-top属性失效问题解决
- CSS中margin-top属性失效问题解决
- CSS中margin-top属性失效问题解决
- jsp在ie6中css的margin属性失效问题
- margin-top失效
- margin-top失效原因
- 解决CSS margin-top在火狐下失效问题
- CSS中margin属性介绍
- CSS(margin)问题嵌套div中margin-top转移
- css中top和margin-top的区别
- margin-top失效的解决办法
- IE8下margin-top失效
- margin-top 失效的问题
- div+css - CSS标准 - 8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' - 8.3边距属性
- margin-top失效, css + div 布局之 CSS盒模型 外边距合并问题
- 关于CSS中left:50%; top:50%; margin-left: -150px; margin-top: -75px;
- [CSS]CSS属性 margin
- CSS中margin属性值的含义
- Cordys对浏览器支持信息(Support information on latest browsers)
- 第二章 身份验证——《跟我学Shiro》
- android图像绘制获取本地图片或拍照图片等图片资源
- CentOS 6.5下利用Rsyslog+LogAnalyzer+MySQL部署日志服务器
- 欢迎使用CSDN-markdown编辑器
- CSS中margin-top属性失效问题解决
- Mahout(二):相似性度量
- 前端CSS规范
- 详解spl_autoload_register()函数
- UT-Austin大学在Image search and large-scale retrieval方面的一系列papers
- Winbond Trusted Platform Module 1.2 驱动安装解决办法详解
- 修改自增属性为非自增
- 【python】input
- 设计模式(三)----- 建造者模式(Builder)----(JAVA版)