什么是外边距合并,以及常见的几种情况

外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。
所谓的外边距合并就是,当两个垂直外边距相遇时,它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。

发生合并的情况有以下几种:

  • 两个元素是兄弟关系:
  • .两个元素是父子关系(没有内边距或边框把外边距分割开):
  • 一个空元素,没有边框和填充

如何解决margin塌陷以及margin合并相关推荐

  1. 解决margin塌陷的问题_解决margin塌陷与margin合并(margin)清除浮动问题

    **1.margin塌陷** 问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生 ...

  2. margin塌陷与margin合并、浮动流

    一.margin 塌陷 父子嵌套元素,垂直方向的margin,父子会粘合在一起,取最大的值.子级不能根据父级定位,好像父级没有棚. 解决方案,触发bfc(block format context),使 ...

  3. margin塌陷和margin合并

    一.margin塌陷 父子嵌套元素垂直方向的 margin ,父子元素是结合在一起的,他们两个会取其中最 大的值 正常情况应该是父级相对于浏览器进行定位,子级应该相对于父级定位的 , 但是 margi ...

  4. margin设置规则与margin塌陷、合并

    ① margin 设置规则 margin 复合属性,可以设置一个值.两个值.三个值.四个值,规则如下: margin: 10px; /*设置 4 个方向的外边距*/ margin: 10px 20px ...

  5. 【CSS】1035- 再看 margin 塌陷和合并问题

    前言 小问题总是被人视而不见,等遇到的时候又突然想不起来,所以我们需要经常总结,这可以帮助我们更好的记忆东西.今天我们来总结两个不起眼的小问题:margin塌陷和margin合并 margin塌陷 什 ...

  6. 【HTML/CSS】margin塌陷和合并问题

    1 margin塌陷问题 1.1 示例 <!DOCTYPE html> <html lang="en"> <head><meta char ...

  7. 解决margin塌陷的问题_剖析一些经典的CSS布局问题,为前端开发+面试保驾护航...

    一.让一个元素水平垂直居中,到底有多少种方案? 水平居中 对于 行内元素: text-align: center; 对于确定宽度的块级元素: width和margin实现.margin: 0 auto ...

  8. 解决margin塌陷的问题_margin塌陷问题及解决

    margin塌陷现象:在垂直方向如果有两个元素的外边距有相遇,在浏览器中加载的真正的外边距不是两个间距的加和,而是两个边距中值比较大的,边距小的塌陷到了边距值大的值内部. 1. 同级元素塌陷:上面的元 ...

  9. 解决margin塌陷问题

    一:什么是margin塌陷 ? 在标准文档流中,竖直方向(左右方向的不会出现塌陷现象)的margin会出现叠加现象,即较大的margin会覆盖掉较小的margin,竖直方向的两个盒子中间只有一个较大的 ...

最新文章

  1. 程序、进程、线程的关系
  2. 【避坑】初次接项目的血与泪,扎坑了老
  3. [YTU]_2435 ( C++ 习题 输出日期时间--友元函数)
  4. MySQL sql99语法—左(右)外连接
  5. 工作161:eachart渲染步骤
  6. 可临摹的PSD分层模板,拆解上线,高逼格电商设计竟如此简单?
  7. docker安装(2018-03-14版本)
  8. virtualbox 安装 虚拟机的时候报错不能创建新任务
  9. Rust: Rust 异步入门 (作者洋芋,来自Rust语言中文社区)
  10. 多变量微积分笔记(2)——多元函数及其微分
  11. 行测-判断推理-图形推理-样式规律-黑白运算
  12. git第一次提交不能使用git commit -a -m
  13. 2019年5大企业网盘对比
  14. fabric2.0安装时github-production-release-asset-2e65be.s3.amazonaws.com连接失败
  15. mysql根据出生日期,查询年月日,并且拼接
  16. Shell语言基本操作一(Xshell5)
  17. ROK 万国觉醒2D资源分析
  18. 下载spring 5
  19. 普通人快速上手编程的三个方法
  20. php实现ddns,动态域名DDNS实现

热门文章

  1. Android图片叠加效果
  2. 英科宇三维CAD Solidworks 2018
  3. java 可见_java 可见性简单总结
  4. 金融风险管理师FRM培训班多少费用?贵吗?
  5. 巨杉Tech | SequoiaDB数据域及存储规划
  6. C实现-小写字母转换为大写字母(具体)
  7. 黑白棋C\C++实现方式
  8. 常见分布式理论(CAP、BASE)和一致性协议(Gosssip、Raft)
  9. Object-C学习比较费劲的3点原因
  10. linux查看wifi信号命令_无线信号强度解析及linux如何查看wifi信号强弱等