鲨鱼网
CSS中margin-top属性失效问题解决
创始人
2024-07-13 18:31:29
0次

CSS属性有很多值得学习的地方，你对CSS中margin-top属性失效的解决方法是否熟悉，这里和大家分享一下，相信通过本文的介绍你对margin-top属性失效的解决方法一定会有深刻的认识。

关于margin-top属性失效的解决方法

常出现两种情况：

（一）margin-top失效

先看下面代码：

  1.  
  2. float:left
 
  • clear:both;margin-top:20px;
    •  
  •  
  •  

    • 两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距margin-top没有效果。

    网上能找到的两种比较靠谱的解释：

    1：“在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”

    2：当***个层浮动，而第二个没浮动层的margin会被压缩，详见--浮动元素后非浮动元素的margin的处理。

    得到解决问题思路：要浮动一起浮动，要就一起不浮动。

    解决办法：

    1.box2增加float属性

    2.box1与box2之间增加一层"

    "

    （二）子元素设置margin-top作用于父容器

    1.  
    2. clear:both;  
    3. margin-top:20px;height:50px;width:500px;  
    4. background:#000;
     
  •  
  •  

    • 当给box2设置margin-top时，在FF下仅作用于父容器。

    解决办法：

    1.给父容器box加overflow:hidden;属性

    2.父容器box加border除none以外的属性

    3.用父容器box的padding-top代替margin-top
     

    【编辑推荐】

    1. 解决CSS margin-top在火狐下失效问题
    2. 技术分享 如何实现CSS横向导航
    3. 术语汇编 基本CSS滤镜概述
    4. margin-top失效常见症状及解决方法
    5. 鼠标经过时改变DIV背景颜色的三种途径

     

     

    上一篇：获取webshell的十种方法

    下一篇：JavaScript DOM基础操作实例

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    2009 IBM动态架构新动力...
    通过 XML 进行内容发布
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    着眼MAC地址，解救无法享受D... 在安装了DHCP服务器的局域网环境中，每一台工作站在上网之前，都要先从DHCP服务器那里享受到地址动...
    为啥国人偏爱 Mybatis，... 关于 SQL 和 ORM 的争论，永远都不会终止，我也一直在思考这个问题。昨天又跟群里的小伙伴进行...