场景：两个相互嵌套的块级元素，父子元素相互紧贴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. Oracle带输入输出参数的存储过程

    (一)使用输入参数 需求:在emp_copy中添加一条记录,empno为已有empno的最大值+1,ename不能为空且长度必须大于0,deptno为60. 创建存储过程: create or rep ...

  2. MyBatis(1)：实现MyBatis程序

    一,MyBatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以 ...

  3. springmvc框架找那个@responseBody注解

    <%@ page contentType="text/html;charset=UTF-8" language="java" %><html& ...

  4. 【C/C++】拔河比赛/分组/招商银行

    题目:小Z组织训练营同学进行一次拔河比赛,要从n(2≤n≤60,000)个同学中选出两组同学参加(两组人数可能不同).对每组同学而言,如果人数超过1人,那么要求该组内的任意两个同学的体重之差的绝对值不 ...

  5. NEEPU-CTF 2021公开赛 writeup

    没打这场比赛,但是题目质量挺高的.赛后赶紧学习一波. RUSH B Linux入门 考linux指令的. cat hint.txt 提示让访问根目录. ls / 发现flag cat flag 提示说 ...

  6. 修复 Edge 浏览器 1Password 插件 Ctrl+Shift+X 弹出快捷键失效

    解决方式 在 Edge 浏览器右上角 1Password插件图标上右键,选择设置: 在打开的 1Password 设置页面中,找到快捷键设置环节,默认使用快捷键打开后面为空,点击"在扩展也上 ...

  7. LuoguP4759 [CERC2014]Sums 题解

    Content 给定 \(t\) 组数据,每组数据给定一个数 \(n\),判断 \(n\) 是否能够分解成连续正整数和,能的话给出最小数最大的方案. 数据范围:\(1\leqslant n\leqsl ...

  8. SpringCloud(三) Zuul

    Zuul 有了eureka . feign 和 hystrix 后,基本上就搭建了简易版的分布式项目,但仍存在一些问题,比如: 1.如果我们的微服务中有很多个独立服务都要对外提供服务,那么我们要如何去 ...

  9. Kafka Eagle分布式模式

    1.概述 最近有同学留言,Kafka Eagle的分布式模式功能怎么使用,如何部署安装?今天笔者就为大家来详细介绍一下Kafka Eagle的分布式模式功能的安装和使用. 2.内容 首先,这里我们需要 ...

  10. windows串口之虚拟串口和Access port

    关于 本文将介绍自己常用的串口工具,演示环境为Windows. 1. 虚拟串口 1.1 没有那么多的物理串口, 用虚拟串口来凑.需要软件Configure Virtual Serial Port Dr ...