场景：两个相互嵌套的块级元素，父子元素相互紧贴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. alert之后才执行

    如果在正常情况下,代码要在alert之后才执行,解决办法:将要执行的代码用setTimeout延迟执行即可(原因:页面未加载完毕)

  2. 出现 CannotAcquireLockException 异常

    项目出现  CannotAcquireLockException异常 原因: 百度了一下,是由于 Spring 事务嵌套造成死锁 结合自己的, handleWithdraw 方法底层有调用 其他 se ...

  3. 【Linux】【Services】【SaaS】Docker+kubernetes（7. 安装Docker私有镜像仓库）

    1. 简介 1.1. 自己做个私有镜像,方便上传和下载,我也在docker官网注册了一个账号,做好的镜像可以传上去 1.2. Redhat自带私有镜像的功能,需要安装包,这是howto: https: ...

  4. maven打包插件详解

    maven-jar-plugin插件的使用及详解 该插件的xml配置及详解如下: <plugin> <groupId>org.apache.maven.plugins</ ...

  5. jstl中的choose标签

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

  6. [MySQL实战-Mysql基础篇]-mysql的日志

    参考文章: https://www.cnblogs.com/f-ck-need-u/archive/2018/05/08/9010872.html https://dev.mysql.com/doc/ ...

  7. 调整markdown 图片大小和对齐方式

    [博客园]调整markdown 图片大小和对齐方式 图片大小 例 <img src="https://img2020.cnblogs.com/blog/2199257/202101/2 ...

  8. 从来也科技UiBot 6.0社区版全线免费，看RPA距离“人人可用”还有多远

    来也科技RPA产品UiBot 6.0社区版全线免费,背后的逻辑是什么? 来也科技CPO褚瑞:开发者生态才是RPA厂商的真正护城河 来也科技UiBot 6.0社区版全线免费,RPA距离真正人人可用还有多 ...

  9. java 多线程：线程通信-等待通知机制wait和notify方法;(同步代码块synchronized和while循环相互嵌套的差异);管道通信：PipedInputStream;PipedOutputStream;PipedWriter; PipedReader

    1.等待通知机制: 等待通知机制的原理和厨师与服务员的关系很相似: 1,厨师做完一道菜的时间不确定,所以厨师将菜品放到"菜品传递台"上的时间不确定 2,服务员什么时候可以取到菜,必 ...

  10. RPA培训：RPA的核心三个组件常见部署方式（RPA学习天地）

    整体架构 目前主流厂商的RPA平台就是由控制台.设计器和机器人这三个标准套件组成,这三个核心套件形成了RPA产品的基本要素.其它如AI平台.人机交互.流程挖掘.自动化中心等都是衍生出来的周边产品. 1 ...