场景：两个相互嵌套的块级元素，父子元素相互紧贴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. Linux:$i 和 ${i}区别

    例如你要把有个变量的值和其他字符串连接起来,就需要用到{},以明示{}中的是一个变量. 例如: export var1=ABC export var2=var1=${var1} echo $var2 ...

  2. java中子类继承父类什么？

    1.继承public和protected修饰的属性和方法,不管子类和父类是否在同一个包: 2.继承默认权限修饰符修饰的属性和方法,前提是子类和父类在同一个包.

  3. vm16虚拟机安装win11

    vm16虚拟机安装win11 参考https://baijiahao.baidu.com/s?id=1712702900207158969&wfr=spider&for=pc win1 ...

  4. Java中的循环结构（二）

    循环结构(二) 学习本章有道的单词: rate:速度,比率 young:年轻的,年少 schedule:时间表,调度 neggtive:消极的;否定 customer:顾客,观众 birthday:生 ...

  5. Nginx支持php

    目录 一.简介 二.配置 三.测试 四.参数 一.简介 Nginx本身只能解析html文件,但有些网页是php写的,就需要Nginx连接php,将网页解析成html再发给客户端. 配置中将.php 结 ...

  6. rpm-build方式制作rpm包

    目录 一.简介 二.具体操作 一.简介 可以将编译完成的服务打成rpm包放到私有仓库了,用于自定义的各种软件进行安装部署配置. 二.具体操作 1.安装软件,这个命令将构建rpm包 yum -y ins ...

  7. [BUUCTF]REVERSE——[GXYCTF2019]luck_guy

    [GXYCTF2019]luck_guy 附件 步骤: ida载入,shift+f12查看程序里的字符串,看到了关于flag的提示 双击跟进跳转,ctrl+x找到关键函数 flag是由f1和f1拼接而 ...

  8. Table.SplitColumn拆分…Split…（Power Query 之 M 语言）

    数据源: 一列若干行数据. 目标: 根据特定条件拆分 操作过程: 选取"品名"列>[主页](或[转换])>[拆分列] 选取"品名"列>[主页] ...

  9. 资源分配单位（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 那些分配了资源的任务,其中的资源是有数量单位的,默认工时单位是100%,材料单位是1. 比如某吃货,为了完成吃米饭这一任务 ...

  10. .NET静态代码织入——肉夹馍（Rougamo）

    肉夹馍是什么 肉夹馍通过静态代码织入方式实现AOP的组件..NET常用的AOP有Castle DynamicProxy.AspectCore等,以上两种AOP组件都是通过运行时生成一个代理类执行AOP ...