根据规范，一个盒子如果没有上补白(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. 【hdu6035】 Colorful Tree dfs序

    题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6035 题目大意:给你一棵树,树上每个节点都有一个颜色. 现在定义两点间的距离为两点最短路径上颜色集合 ...

  2. yolov3源码分析keras（一）数据的处理

    一.前言 本次分析的源码为大佬复现的keras版本,上一波地址:https://github.com/qqwweee/keras-yolo3 初步打算重点分析两部分,第一部分为数据,即分析图像如何做等 ...

  3. python3 判断大小端的一种方法

    这里用到了array.array('H', [1])来测试大小端,[1]可以转化为十六进制的0x0001,占两位,00位高位, 01位低位,通过第一位就可以判断大小端. 如果是小端,则转化为bytes ...

  4. Scala的下载和安装（本地）

    前言 Scala版本的选法: 目前,Kafka库和JDBC并不支持Scala2.11的编译,以及结合大多数人的使用请来看.         scala2.10.*为主,在这,scala2.10.4版本 ...

  5. JavacProcessingEnvironment类解读

    JavacProcessingEnvironment类的继承体系如下: 其中含有很多内部类,最重要的是迭代注解处理器相关的类,如下:

  6. Chapter 5. Conversions and Promotions

    JLS解读:https://docs.oracle.com/javase/specs/jls/se7/html/jls-5.html 基本数据类型的转换 1) boolean不可以转换为其他的数据类型 ...

  7. javascript字符串拼接

    var c='../Project/SelectPerson.aspx?personList='+'"'+personListValue+'"' X('Window2').x_sh ...

  8. Phoenix 4.8

    From v4.8.0 onwards, user can enable to map it’s schema to the namespace so that any table created w ...

  9. 接口文档管理神器RAP2安装和部署

    目录 一 RAP2 二 RAP2 安装需要的环境 2. 1 Node.js 安装: 2. 2 Mysql 5.7+ 安装 2 .3 Redis 安装见文章 2. 4 后端 rap2-delos 安装 ...

  10. C++对象的内存布局以及虚函数表和虚基表

    C++对象的内存布局以及虚函数表和虚基表 本文为整理文章, 参考: http://blog.csdn.net/haoel/article/details/3081328 http://blog.csd ...