场景：两个相互嵌套的块级元素，父子元素相互紧贴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. LocalDate计算两个日期相差天数

    import org.apache.commons.lang.StringUtils; import java.time.LocalDate; import java.time.ZoneId; imp ...

  2. 【Linux】【Shell】【Basic】Programming

    shell脚本编程: 编程语言的分类:根据运行方式 编译运行:源代码-->编译器(编译)-->程序文件 解释运行:源代码-->运行时启动解释器,又解释器边解释边运行 根据其编程过程中 ...

  3. maven依赖对zookeeper的版本冲突问题

    我用的是springcloudAlibaba+zookeeper zookeeper下载后 1,修改配置文件,conf目录下的zoo_sample.cfg修改为zoo.cfg. 2,打开zoo.cfg ...

  4. Centos 常用指令

    1.*.tar 用 tar  xvf 解压 2.*.gz 用 gzip  d或者gunzip 解压 3.*.tar.gz和*.tgz 用 tar xzf 解压 4.*.bz2 用 bzip2 d或者用 ...

  5. 谱聚类算法—Matlab代码

    % ========================================================================= % 算 法 名 称: Spectral Clus ...

  6. [BUUCTF]REVERSE——[GKCTF2020]Check_1n

    [GKCTF2020]Check_1n 附件 步骤: 例行查壳儿,32位程序,无壳儿 32位ida载入,习惯性的检索程序里的字符串,看到了一个比较有意思的字符串,但是不懂是什么解密,先不管它了 在这些 ...

  7. LR常见报错

    转:https://blog.csdn.net/yoyo_sunny/article/details/43406503

  8. C语言程序设计：综合设计实验一(设计一个文字游戏)

    目录 C语言程序设计:综合设计实验一(设计一个文字游戏) 1.实验要求 2.设计思路 3.源码 4.后话 C语言程序设计:综合设计实验一(设计一个文字游戏) 1.实验要求 (1) 设计一个文字游戏,通 ...

  9. CF760A Petr and a calendar 题解

    Content 输入两个数 \(m,d\),请输出 \(2017\) 年 \(m\) 月的日历[其中第一天是星期 \(d\)(如果 \(d=7\) 就是星期天)]需要印的列数. 格式见题目所述. 数据 ...

  10. JAVA验证身份证号码是否正确

    package com.IdCard; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.D ...