这是因为父元素的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++常见错误总结

    1.  error C2871: 'std' : does not exist or is not a namespace 原来 C++有两个不同版本的头文件.引入名字空间这个概念以前编译器用的是#i ...

  2. POJ2186(有向图缩点)

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 28379   Accepted: 11488 De ...

  3. Scala学习——操作符(初)

    经常看到却反应不出来的(->) val a = 2 val b = a->4 //表示生成一个tuple println(b._1+" "b._2) //2 4

  4. 47: error: undefined reference to `QWebView::QWebView(QWidget*)'

    QT  5.6版本 用Qt界面设计器打开界面文件,在界面上托入QWebView控件,这时运行会出现错误,错误如下: ......... undefined reference to `QWebView ...

  5. ScrollView cannot scroll in Slidinguppanellayout 解决办法

    xml源码如下 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:an ...

  6. sorted matrix - search & find-k-th

    sorted matrix ( Young Matrix ) search for a given value in the matrix: 1) starting from upper-right ...

  7. Eclipse&nbsp;Helios(3.6.2)下载地址

    Eclipse Helios(3.6.2)下载地址   鉴于有些插件最高只能支持到指定的eclipse 3.6版本,以此收集3.6下载地址 Eclipse Helios (v3.6.2) Eclips ...

  8. 第3章 编写ROS程序-2

    1.发布者程序 在本节中,我们将看到如何发送随机生成的速度指令到一个turtlesim海龟,使它漫无目的地巡游.这个程序的源文件称为pubvel,这个程序展示了从代码中发布消息涉及的所有要素. 其代码 ...

  9. http verbs--Method Definitions

    http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html part of Hypertext Transfer Protocol -- HTTP/1. ...

  10. ListView Item 里多种点击事件的用法

    思路:由于item里需要处理多种点击事件,所以不便于用listview的onItemClickListener,  需要在adapter里进行设置不同点击区域的onclicklistener 但是,有 ...