div标签中的元素margin-top失效的解决方法

元素上级标签是div，已经设置了width和height等的属性，可是，在对元素使用margin进行调整的时候，无法生效，下面有个不错的解决方法，感兴趣的朋友可以参考下
 
如题。

问题很奇葩。元素上级标签是div，已经设置了width和height等的属性，可是，在对元素使用margin进行调整的时候，无法生效。同学经验提示，对该元素的父元素属性设置成

overflow:hidden;

 
 
 
嵌套div中margin-top转移问题的解决办法

在这两个浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div style="width:300px; height:100px">上部层</div>

<div style=" width:300px; height:300px;overflow:hidden "> <!--父层-->
     <div style="margin:50px; width:200px; height:200px"">子层</div>
</div>

</body>
</html>

原因：盒子没有获得 haslayout  造成 margin-top无效

解决办法：

1、在父层div加上：overflow:hidden；

2、把margin-top外边距改成padding-top内边距 ；

3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。

父层div加： padding-top: 1px;

4、让父元素生成一个 block formating context，以下属性可以实现
    * float: left/right
    * position: absolute
    * display: inline-block/table-cell(或其他 table 类型)
    * overflow: hidden/auto

父层div加：position: absolute;

div里面的margin-top失效的更多相关文章

  1. 如何让一个div里面的div垂直居中？

    如何让一个div里面的div垂直居中? 如何让上面灰色有文字那个div和背景图标垂直居中,不管屏幕大小有好大,始终在垂直方向上的中间.上面有整个布局和样式表,谢谢高手指点 CSS3时代当然要用CSS3 ...

  2. jq slideDown后里面的A链接失效（已解决）

    jq slideDown后里面的A链接失效(解决) 用jq 的 slideDown写了一个二级下拉菜单,但是里面的a标签全部失效了,挂的链接右键菜单可以正常打开,但是左键正常点击不行 查阅了很多资料, ...

  3. 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

    一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...

  4. div里面的id与for

    <input class="select" type="checkbox" value="1" id="checkboxjc ...

  5. ajax局部刷新后里面的jquery事件失效的解决方法

    live() 与bind()作用基本一样. 最重要区别:live()可以将事件绑定到当前和将来的元素(eg:为id=zy元素绑定点击事件,而当你用js动态生成一个节点并插入到dom文档结构中时,如果你 ...

  6. 通过jQuery遍历div里面的checkbox

    遍历: $('#queryUser2 input[type="checkbox"]:checked').each( function () { a = a + $(this).va ...

  7. css参考文档； 官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

    css参考文档        http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...

  8. 后台找到repeater里面的div并添加客户端点击事件

    public partial class Inv_SelectWorkservice : System.Web.UI.Page,IPostBackEventHandler{ } 通过OnItemCre ...

  9. 5.用JQuery实现选中select里面的option显示对应的div

    用JQuery实现选中select里面的option显示对应的div HTML: <select name=""  onchange="select(this)&q ...

随机推荐

  1. Web调用安卓，苹果手机摄像头，本地图片和文件

    由于要给一个客户做一个记账WAP,里面有调用手机拍照功能,这里记录一下,以供需要的朋友,下面是完整的一个HTML页面内容,放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,我测 ...

  2. 新版本的jquery checkbox 全选反选代码只能执行一遍，第二次就失败attr与prop区别

    $("#all_check").click(function() { $("input[name='checkShop[]']").attr("che ...

  3. k近邻模型

    k近邻模型主要包含三个基本要素:距离度量.k值的选择.分类决策规则 模型: k近邻法中,当训练集.距离度量.k值及分类决策规则确定后,对于一个新的输入实例,它所属的类唯一确定,这相当于根据上述要素将特 ...

  4. Python基础学习笔记---5.输入\输出 I\O文件操作目录

    在很多时候,你会想要让你的程序与用户(可能是你自己)交互.你会从用户那里得到输入,然后打印一些结果.我们可以分别使用 raw_input 和 print 语句来完成这些功能.对于输出,你也可以使用多种 ...

  5. caffe+NVIDIA安装+CUDA-7.5+ubuntu14.04（显卡GTX1080）

    首先强调,我们实验室的机器是3.3w的机器,老板专门买来给我们搞深度学习,其中显卡是NVIDIA GeForce  GTX1080(最近新出的,装了两块),cpu是intel i7处理器3.3Ghz, ...

  6. Linux下编译C代码,出现tan函数报错的情况

    undefined reference to `tan' 但是已经包含了头文件 <math.h>了,可还是报错,说是找不到tan 这个问题的原因不是很清楚, 但是网上给出的方案,就是编译的 ...

  7. hdu_5753_Permutation Bo(找规律)

    题目连接:hdu_5753_Permutation Bo 题意: 给你一个有n个数的数列c1~cn,h1~hn为1~n的排列,求ci[hi>hi-1  and  hi>hi+1]的期望和. ...

  8. wps制作目录

    01 设置标题为.标题1.标题2,标题302 引用--插入目录03 配置文档结构图.查看--可快速回到目录

  9. OPENWRT make defconfig错误之一

    make defconfig rm: cannot remove `tmp/.host.mk': Permission denied 退到trunk上级目录 su root sudo chown -R ...

  10. javascript小数乘法精确率问题

    做前端页面开发的经常会遇到数值的乘法计算,带小数位计算会出现值溢出的问题,如: JS里做小数的乘法运算时会出现浮点错误,具体可以测试一下: <script>alert(11*22.9)&l ...