这是因为父元素的padding设置为0时所产生的bug,它自动将margin-top提升到了父元素上,所以此时我们所设置的margin-top自动就到父元素上了,解决方案:

1.给父元素添加一个padding,例如:padding-top:1px;

2.给父元素设置overflow:hidden;

3.把子元素设置成一个BFC,例如:{display:table-cell;position:absolute;overflow:hidden},父元素的位置设置为绝对定位。

div嵌套时,子元素设置margin-top失效问题的更多相关文章

  1. div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。

    先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...

  2. 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  3. 子元素设置margin-top后,父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. CSS子元素设置margin-top作用于父容器?

    CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

  5. 解决:子元素设置margin-top,父元素也受影响的问题

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...

  6. 解决div嵌套时IE8和FF无法自适应高度

    解决div嵌套时IE8和FF无法自适应高度 还是做类似新浪评论回复的时候,将回复的DIV嵌套在一个DIV中,然后点击回复的时候显示子DIV,这是父DIV的高度是会变化的,于是我将父DIV的高度设置为h ...

  7. 给子元素设置margin-top无效果的一种解决方法

    在写一个登陆界面的时候,设置登录按钮的margin-top时出了问题 先是这么写的 <div style="margin-top:30px"> <a style= ...

  8. 解决子元素设置margin-top,效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  9. 子元素设置margin-top作用到了父元素

    子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解

随机推荐

  1. 百度地图API的第一次接触

    因为项目的需求,第一次接触了百度API. 第一步:引用百度地图API的脚本 如果在局域网环境中,要把地图文件和js文件都要下载下来 <script type="text/javascr ...

  2. boost::function 通过boost::bind调用类成员函数

    1. 首先引用boost::function和boost::bind的头文件和库: #include "boost/bind.hpp" #include "boost/f ...

  3. ORACLE常用数据库字段类型

    ORACLE常用数据库字段类型   常用的数据库字段类型如下:   字段类型 中文说明 限制条件 其它说明  CHAR 固定长度字符串 最大长度2000 bytes     VARCHAR2 可变长度 ...

  4. object类型转换为Array类型

    var obj = {a: 1, b: 2, c: 3}; // .... var arr = []; for(var key in obj){ if(!obj.hasOwnProperty(key) ...

  5. [allmake] -- 交叉编译原来如此简单

    原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处.作者信息和本声明.否则将追究法律责任.:http://www.cnblogs.com/johnd/p/5060530.html 作者:Jo ...

  6. 面试题: 数据库操作面试 已看1 很典型的sql面试题

    摘要:今天参加了大展公司的一个电话面试,那位先生首先问我查询一个表的问题,条件是:1.一个数据表,有username字段.2.查询数据表中姓名姓张的.姓李的.姓刘的总数,并展现在一张表中.我当时就糊涂 ...

  7. vs2013错误 1 Unable to find messages file 'cscui.dll'

    最近使用VS编译的时候,提示错误 错误 1 Unable to find messages file 'cscui.dll' 搜索后,几乎只有1个结果,就是搜索cscui.dll  把正常大小的文件替 ...

  8. 读取web应用下的资源文件(例如properties)

    package gz.itcast.b_resource; import java.io.IOException; import java.io.InputStream; import java.ut ...

  9. js用"."和"[]"获取属性的区别

    在JavaScript中通常使用”."运算符来存取对象的属性的值.或者使用[]作为一个关联数组来存取对象的属性. 对象的属性和方法统称为对象的成员. 访问对象的属性 在JavaScript中 ...

  10. EF中外键重命名,打破原先的约束规则

    本人建议玩code frist的人多用用System.ComponentModel.DataAnnotations和System.ComponentModel.DataAnnotations.Sche ...