根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

这是规范引起的普遍问题。

只要给父盒子设置个有效的 border-top或者padding-top就可以有效的解决这个问题。但实际工作中可以并不想用border-top 或padding-top 对设计图造成影响。

想到overflow:hidden有解决溢出,坍塌,清除浮动的能力，所以overflow:hidden 似乎是最好的解决方式。

如何解决css-子div设置margin-top后，父div与子div一起下移的bug?的更多相关文章

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

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

  2. “display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法

    最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...

  3. 同级div设置display:inline-block，父级div强制不换行

    同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...

  4. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  5. 子div设置浮动无法把父div撑开。

    <div class="mainBox"> <div class="leftBox"></div> <div clas ...

  6. 解决element-ui的表格设置固定栏后，边框线消失的bug

    如上图所示,边框线消失了,解决方法如下 添加css代码,如果是修改全局,则到全局样式文件添加 .el-table__row{ td:not(.is-hidden):last-child{ right: ...

  7. 解决ubuntu下wordpress设置固定链接后文章无法打开

    1.首先查看是否开启了Apache的rewrite功能,新建一个phpinfo的php文档 <?php phpinfo(); ?> 保存为info.php文件 放在www目录下并用浏览器打 ...

  8. vue $emit 父组件与子组件之间的通信（父组件向子组件传参）

    1.首先新建一个子页面为 env.vue的文件(名字这里大家可以自取) 2.然后把子页面引入父页面,代码如图: import env from '@/components/common/env' ex ...

  9. div clear清除浮动产生的影响 被受影响的div加上清除浮动后 不会填充前一个div浮动后空出的位置

  10. 【html/css】若母div设置了透明度，如何才能使得里面的子div不继承母div的透明度

    用rgba的方式给母div设置透明度的话就不会影响子div的透明度了. 例: background: rgba(51, 51, 51, 0.5);

随机推荐

  1. eclipse上搭建Spring环境

    搭建环境之前要下载Spring Tool Suite和Spring framework 1.Spring IDE 下载(也叫Spring Tool Suite 简称 STS),进官网,直接给链接htt ...

  2. 浅谈Express的put与del

    假设有一个景区价格列表页,显示当前的价目表. 价目表存放在express应用的数组中: var tours = [ {id:0,name:'Hood River',price:99.99}, {id: ...

  3. js之math 对象

    Math 对象是js中使用数学公式计算的便捷方法,其方法运行起来比直接写的js运行是对要更快 1.Math.min(一组数值)  该方法可以比较一组数值的大小,并且返回较小的数值 用法: Math.m ...

  4. Swift 使用 #warning

    swift 中没法使用#Warning来提示警告, 可以通过给TODO: FIXME:加上警告, 实现类似的效果. Build Phases ---> Run Script ---> ad ...

  5. R软件常用命令

    1.getwd()      获取默认的目录 2.> mydata <- read.csv("1.csv")  读取1.csv文件中的数据,并赋值给一个mydata的对 ...

  6. IP等级

    IP是Ingress Protection的缩写,IP等级是针对电气设备外壳对异物侵入的防护等级,来源是国际电工委员会的标准IEC 60529,这个标准在2004年也被采用为美国国家标准.  在这个标 ...

  7. python字符串中包含Unicode插入数据库乱码问题 分类： Python 2015-04-28 18:19 342人阅读 评论(0) 收藏

    之前在编码的时候遇到一个奇葩的问题,无论如何操作,写入数据库的字符都是乱码,之后是这样解决的,意思就是先解码,然后再插入数据库 cost_str = json.dumps(cost_info) cos ...

  8. 3DES在Android、Ios 和Java 平台的加密解密

      DES简介:      DES全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法, 算法的入口参数有三个:Key.Data.Mode.      K ...

  9. Android studio 获取每次编译apk时的日期

    项目中需要获取apk的编译日期,首先肯定是用手动的方式获取,但这样容易遗忘,怎么样通过代码的方式获取呢? 其实android 为我们提供了一个BuildConfig的类,android 每次编译的时候 ...

  10. 软件魔方制作系统启动盘并安装win8系统

    不多说,直接上干货! 推荐软件:软件魔方 http://mofang.ruanmei.com/ 这里,我想说的是,这个软件来制作系统盘,是真的方便和好处多多.具体我不多说,本人也是用过其他的如大白菜等 ...