根据规范，一个盒子如果没有上补白(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. webpack的安装与使用（单文件）

    在安装 Webpack 前,你本地环境必须已安装nodejs. 可以使用npm安装,当然由于 npm 安装速度慢,也可以使用淘宝的镜像及其命令cnpm(npm install -g cnpm --re ...

  2. day 32 css后续补充以及js 简单入门

    前情提要: 利用html 和css ,js 模拟小米的官网(待做) 一:第一个sj利子 <!DOCTYPE html> <html lang="en"> & ...

  3. 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...

  4. 大数据技术之_19_Spark学习_04_Spark Streaming 应用解析小结

    ========== Spark Streaming 是什么 ==========1.SPark Streaming 是 Spark 中一个组件,基于 Spark Core 进行构建,用于对流式进行处 ...

  5. vue+Element-ui实现分页效果

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui ...

  6. golang的并行快速排序

    .nums[]作为core,将nums中大于core的元素放入greater,将不大于core的元素放入less 当nums长度为1时往ch中写入此元素 .分别对less和greater进行1操作(并 ...

  7. Git的gitattributes文件详解

    转自:Git的gitattributes文件详解 Git的gitattributes文件是一个文本文件,文件中的一行定义一个路径的若干个属性. 1. gitattributes文件以行为单位设置一个路 ...

  8. Memcached理解笔记1---安装&常规错误&监控

    一.下载 1.Libevent 简单的说就是一个事件触发的网络库,Memcached离不开它. wget http://cloud.github.com/downloads/libevent/libe ...

  9. Java并发编程-核心问题(1)

    一.常见问题 从小的方面讲, 并发编程最常见的问题就是可见性.原子性和有序性问题. 从大的方面讲, 并发编程最常见的问题就是安全性问题.活跃性问题和性能问题. 下面主要从微观上分析问题. 二.可见性问 ...

  10. 使用Java设计验证码生成程序

    我们来设计一个简单的验证码生成程序:验证码一个由4位的数字.字母随机组合而成图像,为了避免被光学字元识别(OCR,Optical Character Recognition)之类的程序识别出图片中的数 ...