场景：两个相互嵌套的块级元素，父子元素相互紧贴margin-top会合并作用在父元素的子元素
结果：导致两个盒子同时移动

解决方法：

1.给父元素设置overflow：hidden

2.给父元素设置浮动       /* float:left */

3.将父元素转为行内块元素  /*display:inline-block*/

注意：1.在行内元素中垂直方向的margin和padding是无效使用的
     2.如果两个盒子（块元素），子盒子不设置宽度使用的父元素的宽度，设置margin和padding是不会撑大盒子的

CSS基础 margin塌陷问题以及解决 办法的更多相关文章

  1. css中常见margin塌陷问题之解决办法

    塌陷问题 当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列 首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <d ...

  2. CSS的margin塌陷

    一.两个div并列,上面div的margin-bottom和下面div的margin-top会塌陷,也就说会取上面div的margin-bottom和下面div的margin-top的最大值作为两个并 ...

  3. WEB学习-CSS中Margin塌陷

    margin的塌陷现象 标准文档流中,竖直方向的margin不叠加,以较大的为准. 如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的: 盒子居中margin:0 auto; marg ...

  4. javaweb 使用页面模板CSS或者Js修改失效的解决办法（Tomcat缓存问题）

    原因是:浏览器的自动缓存机制导致的. 浏览器会自动缓存静态文件以加快访问速度,但是这导致了他不会再从服务器端接收静态文档了,这就导致我在idea里面改的css和js文档,浏览器根本没下载下来. 所以解 ...

  5. css样式float造成的浮动“塌陷”问题的解决办法

    什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级元素,而不论 ...

  6. CSS高度塌陷问题与解决办法

    问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应 ...

  7. CSS浮动布局带来的高度塌陷以及其解决办法

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  8. CSS的margin塌陷（collapse）

    <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...

  9. 问题与对策：CSS的margin塌陷（collapse）

    1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: & ...

随机推荐

  1. mysql 执行报错：Error querying database. Cause: java.sql.SQLSyntaxErrorException:which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by

    1.这个错误发生在mysql 5.7 版本及以上版本会出现的问题: mysql 5.7版本默认的sql配置是:sql_mode="ONLY_FULL_GROUP_BY",这个配置严 ...

  2. 剖析虚幻渲染体系（13）- RHI补充篇：现代图形API之奥义与指南

    目录 13.1 本篇概述 13.1.1 本篇内容 13.1.2 概念总览 13.1.3 现代图形API特点 13.2 设备上下文 13.2.1 启动流程 13.2.2 Device 13.2.3 Sw ...

  3. shell脚本 查看cpu的温度

    一.简介 源码地址 日期:2018/8/24 介绍:查看主板上单个多核CPU中温度最高的一个内核 效果图: 二.使用 适用:centos6+ 语言:英文 注意:需要先安装lm_sensors,不支持虚 ...

  4. <转>libevent使用demo

    这篇文章介绍下libevent在socket异步编程中的应用.在一些对性能要求较高的网络应用程序中,为了防止程序阻塞在socket I/O操作上造成程序性能的下降,需要使用异步编程,即程序准备好读写的 ...

  5. HDD深圳站：全生命周期赋能开发者，华为引领应用生态升级

    12月14日,由华为开发者联盟主办的HDD(HUAWEI Developer Day)于深圳举行.此次HDD主论坛,围绕打造应用全生命周期服务,介绍了华为在创新孵化.开发测试.应用分发和运营增长阶段的 ...

  6. 对Spring IOC容器的思考

    最近在看Spring5的视频教学,学到了IOC容器这块,对IOC有些浅薄的理解,分享一二:有错误之处,还请大佬指出 IOC(Inversion of Control 控制反转),是面向对象编程中的一种 ...

  7. 使用批处理文件(.bat)启动多个CMD窗口并执行命令

    由于每次启动本机的kafka都需要打开2个cmd窗口,分别启动zookeeper服务和kafka服务,操作相对繁琐,于是想起了批处理来帮忙一键启动. 在桌面新建一个txt文件,改后缀名为.bat,并加 ...

  8. CF977B Two-gram 题解

    Content 给定一个字符串 \(s\),请求出出现次数最多的长度为 \(2\) 的子串. 数据范围:\(2\leqslant |s|\leqslant 100\). Solution 直接求出所有 ...

  9. LuoguP7478 【A】StickSuger 题解

    Content 给定一个长度为 \(n\) 的仅包含小写字母的字符串 \(s\),请找到一个二元组 \((i,j)\)(\(i<j\))使得在交换字符串 \(s\) 的第 \(i\) 个和第 \ ...

  10. LuoguB2034 计算 2 的幂 题解

    Content 给定整数 \(n\),求 \(2^n\). 数据范围:\(0\leqslant n<31\). Solution 第一种各位都能想得到的,直接循环 \(n\) 次,往答案里面乘以 ...