场景：两个相互嵌套的块级元素，父子元素相互紧贴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. UIButton总结

    UIButton 1. 功能 既能显示文字,又能显示图片(能显示2张图片,背景图片.内容图片) 长按高亮的时候可以切换图片\文字 直接通过addTarget...方法监听点击 2. 状态 normal ...

  2. 【Service】【Database】【MySQL】基础概念

    1. 数据模型:层次模型.网状模型.关系模型 关系模型: 二维关系: 表:row, column 索引:index 视图:view 2. SQL接口:Structured Query Language ...

  3. JSP中session、cookie和application的使用

    一.session (单用户使用) 1.用处:注册成功后自动登录,登录后记住用户状态等 使用会话对象session实现,一次会话就是一次浏览器和服务器之间的通话,会话可以在多次请求中保存和使用数据. ...

  4. 算法 A-Star(A星)寻路

    一.简介 在游戏中,有一个很常见地需求,就是要让一个角色从A点走向B点,我们期望是让角色走最少的路.嗯,大家可能会说,直线就是最短的.没错,但大多数时候,A到B中间都会出现一些角色无法穿越的东西,比如 ...

  5. 设计风格之REST

    一.简介 REST简介 REST 是英文 representational state transfer(表象性状态转变)或者表述性状态转 移;Rest 是 web 服务的一种架构风格;使用 HTTP ...

  6. df和du显示不同

    目录 一.简介 二.原因分析 三.解决方法 一.简介 Linux服务器,使用df -h查看文件系统使用率,可以看到/dev/xvdb1磁盘占用了约27G,挂载目录为/opt. 但进入到opt目录中执行 ...

  7. 千兆车载以太网TSN网络测试？TSN Box为您焕新

    TSN概述 在汽车领域内,近几年车内网络通讯方式的变革诉求,期望能够有更高的数据传输速率,以及保证实时性的通讯方式引入.例如对于自动驾驶而言,传统的CAN总线已经远远不能满足其对通讯的要求,而基于以太 ...

  8. [BUUCTF]PWN——[BJDCTF 2nd]test

    [BJDCTF 2nd]test 步骤 根据题目,ssh连接一下靶机 登录成功后,ls看一下当前目录下的文件,根据提示可知,我们没法直接获取flag字符串,但是我们可以读取test的源码, test. ...

  9. C语言程序设计：模拟简单运算器的工作

    目录 C语言程序设计:模拟简单运算器的工作 1.题目 2.分析 3.代码实现 4.结尾 C语言程序设计:模拟简单运算器的工作 1.题目 ​ 模拟简单运算器的工作,输入一个算式(没有空格),遇等号&qu ...

  10. MH/T4029.3 IFPL报文解析

    MH/T4029.3是民航业用来规定飞行计划相关数据交互的规范,今天我们先来解析下其中I类的IFPL报文. 我们先来看看IFPL报文长啥样. ZCZC -TITLE IFPL -FILTIM 0109 ...