这是因为父元素的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. C# 架构模式

    单例模式 (Singleton) 单例讲的是当一个类被初次调用时,会产生一个类的实例, 而这个类的实例会贯穿程序的整个生命周期.单例提供了一个全局.唯一的实例. 步骤:1.让类自己创建一个实例:2.提 ...

  2. Ubuntu下Apache重启错误:Could not reliably determine解决

    错误信息:apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1 ...

  3. ubuntu下mysql的安装与配置

    1.安装,安装的过程中会提示你设置 MySql的"root"密码 sudo apt-get install mysql-server mysql-client 2.把  /etc/ ...

  4. HDOj-1412

    {A} + {B} Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  5. 《精通Spring4.X企业应用开发实战》读后感第五章(Bean作用域)

  6. 《精通Spring4.X企业应用开发实战》读后感第五章(注入参数详解)

  7. 1. md5 collision(50)

    md5 collision(50)      ------南京邮电大学ctf: http://chinalover.sinaapp.com/web19/ 发现了一串代码 <?php $md51 ...

  8. 快速部署Kubernetes集群管理

    这篇文章介绍了如何快速部署一套Kubernetes集群,下面就快速开始吧! 准备工作 //关闭防火墙 systemctl stop firewalld.service systemctl disabl ...

  9. 详解select()函数---

    以后看 http://hi.baidu.com/bimufo/item/139700e4d880cba1c00d755c

  10. Mac安装python细节

    前言 之前在windows平台上安装python直接用Anaconda,优点是所有的科学计算的库都整合进去了,安装方便.在Mac系统下,当然也可以直接安装Anaconda,但是考虑到Mac会自带pyt ...