根据规范，一个盒子如果没有上补白(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. pythonweb框架Flask学习笔记04-模板继承

    # -*- coding:utf-8 -*- from flask import render_template,Flask app=Flask(__name__) @app.route('/hell ...

  2. linux安装git，linux安装jenkins

    首先是两个地址,分别是git的版本下载地址,jenkins的下载地址 https://mirrors.edge.kernel.org/pub/software/scm/git/ http://mirr ...

  3. vue微信分享链接添加动态参数

    微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下 1.安装引用jssdk npm install --save ...

  4. javaWeb知识点学习（一）

    1.静态页面的传递过程 在静态WEB程序中,客户端使用WEB浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务器我现在需 ...

  5. Mysql 5.7版本安装：mysql 服务无法启动。

    一.解压文件 下载好MySQL后,解压到D盘下,也可以根据个人喜好解压在其他盘符的路径下,解压后的路径是:D:\mysql-5.7.17-winx64.解压好后不要太兴奋,需要配置默认文件呢! 二. ...

  6. Eclipse-查看jar源码乱码问题解决

    步骤1: 在eclipse菜单栏中,Window–>Preferences–>General–>Content types,将JAR Content , Java Class Fil ...

  7. HUE配置文件hue.ini 的hdfs_clusters模块详解（图文详解）（分HA集群和非HA集群）

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  8. database lock

    USE masterEXEC sp_lock select * from sys.sysprocesses where blocked<>0 DBCC INPUTBUFFER(120) k ...

  9. springcloud-01-介绍

    跟随springcloud的一套视频学习springcloud, 把学到的记录下来, 方便自己, 方便别人 IDE: idea 一个父工程, 其他均为module 父工程的依赖: <parent ...

  10. php的数组变量

    数组就是存储同一类型的多个变量的 一种特殊的类型 php的数组有两种形态 1.普通类型 eg:$cars = array("Volvo","BMW"," ...