常出现两种情况：

（一）margin-top失效

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

解决办法：

1.box2增加float属性

2.box1与box2之间增加一层"<divstyle="clear:both;"></div>"

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

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

解决办法：

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

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

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

margin top 无效的更多相关文章

  1. 行内元素的padding和margin是否无效

    html中元素分为三种:块级元素.行内元素(也叫内联元素),内联块级元素. 常用块级元素:<div>.<p>.<h1>...<h6>.<ol> ...

  2. IOS机型margin属性无效问题

    这个问题很多小伙伴都有遇到,这次本猿也遇到了,记录一笔. 结论:简单的解决办法margin换padding!如有误,请大神不吝赐教.在Chrome浏览器移动端测试iphone5,打开的也是没问题的(这 ...

  3. $("body").animate({"scrollTop":top})无效的问题

    问题 我在个人站点的左下角和右下角各自使用了如下代码来将页面滚动到顶部和底部: $("body").animate({scrollTop:0},800); $("body ...

  4. 关于苹果iPhone手机对页面margin属性无效的解决方法一（如有错误，请留言批评）

    这个问题,是在给商城网站底部footer设置margin属性的时候发现的,先把出现问题的截图发出来看一下 ​安卓手机,打开正常 ​iphone6 p 打开出现的问题(无视margin-bottom:6 ...

  5. 左右margin top问题百分比值

    不想说今天心情有多差! 9点多開始发现一个"bug",需求是依据屏幕高度动态调整某个div的位置.代码大概是这种. <div style="margin-top: ...

  6. div、ul、li等无法居中问题，text-align无效 margin auto无效

    很简单.如果是div,直接把div换成: <table align="center">        <tr>            <td> ...

  7. 2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  8. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  9. 深入理解CSS中的margin负值

    前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单 ...

随机推荐

  1. LA 3295 数三角形

    https://vjudge.net/problem/UVALive-3295 题意: 数出n行m列的网格顶点能组成多少个三角形. 思路: 直接去数的话比较麻烦,这道题目是可以重复的,只要位置不同就可 ...

  2. POJ 3352 Road Construction（边—双连通分量）

    http://poj.org/problem?id=3352 题意: 给出一个图,求最少要加多少条边,能把该图变成边—双连通. 思路:双连通分量是没有桥的,dfs一遍,计算出每个结点的low值,如果相 ...

  3. Python实现H5页面

    from selenium import webdriver mobile_emulation = {'deviceName':'iPhone X'} options = webdriver.Chro ...

  4. PWA web应用模型

    2018年的第一篇博客,最近都去挤图书馆了,希望新年新气象... 简介 PWA 是一门Google推出的web前端新技术,全称是Progressive Web App,是Google在2015年提出, ...

  5. Android Studio 3.0 及个版本下载和 gradle 各版本下载

    Android Studio 3.0 下载地址: 链接:http://pan.baidu.com/s/1jHVuOQi 密码:3pd0 Android Studio 3.0 包含了三大主要功能: 一套 ...

  6. guava的事件发布订阅功能

    事件的重要性,不用说很重要,在很多时候我们做完一个操作的时候,需要告知另外一个对象让他执行相应操作,比如当用户注册成功的时候,需要抛出一个注册成功的事件,那么有监听器捕获到这个事件,完成后续用户信息初 ...

  7. 二十一 Python分布式爬虫打造搜索引擎Scrapy精讲—爬虫数据保存

    注意:数据保存的操作都是在pipelines.py文件里操作的 将数据保存为json文件 spider是一个信号检测 # -*- coding: utf-8 -*- # Define your ite ...

  8. poj-3046-dp

    Ant Counting Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6829   Accepted: 2514 Desc ...

  9. Angular开发实践（七）： 跨平台操作DOM及渲染器Renderer2

    在<Angular开发实践(六):服务端渲染>这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window. document. navigator等浏览器 ...

  10. 014——数组（十四）array_reduce array_slice array_splice array_sum

    <?php /** */ //array_reduce()递归的用回调函数递归的对数组元素进行处理,返回处理后的值 /*$arr=array(1,2,3,4,5); function func( ...