tip:为能更直观地学习,本文章已省略部分 css 样式代码。

我相信下面的情形大家在日常工作中常常碰到:在制作静态页面中,为了页面整体的协调与美观,我们想让子盒子 image-div 的上边沿距离父盒子 header-div 的上边沿有一定间距。

现页面效果:

目标页面效果:

为了达成上图的效果,我们首先就能想到给子盒子设置一个上外边距:

<style>
.image-div { /*子盒子*/
margin-top:25px;
}
</style>

让我们来看看结果如何呢?

结果和我们所预料的并不相同,子盒子 image-div 并没有和父盒子 header-div 的上边沿形成一定的间距。这两个盒子竟然一起往下移动了,多出了红框区域。

而这种现象,就是 CSS 中常遇到的“边距塌陷”问题中的一种。

边距塌陷

流内块级元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为外边距塌陷(margin collapsing)。

导致边距塌陷的原因是外边距,有以下四种情况计算情况:

  • 如果都是正数,则取最大值

  • 如果相同,则取其中之一

  • 如果有正有负,则取最大的正数加上最小的负数之和

  • 如果都是负数,则取最小值。

相邻(兄弟)盒子之间的塌陷

在 CSS 当中,相邻两个兄弟盒子的外边距区域是公共的,这会导致相邻兄弟盒子之间的边距出现塌陷情况。

下图是相关示例,设置div1盒子的下边距,另设置下方 div2 盒子的上边距:

<style>
#block1 {
margin-bottom: 20;
}
#block2 {
margin-top: 10;
}
</style> <div id = "block1">div1</div>
<div id = "block2">div2</div>

在浏览器开发者工具先看 div1 的 margin 区域(红框):

div2 的 margin 区域(绿框区域):

对应情况:两个盒子之间的外边距如果都是正数,则取最大值。

下方为示例 2,我们将示例 1 中的外边距改为负数:

<style>
#block1 {
margin-bottom: -20;
}
#block2 {
margin-top: -10;
}
</style> <div id = "block1">div1</div>
<div id = "block2">div2</div>

两个盒子的重叠距离为两个负数中最小的数“-20px”(绝对值最大 |-20px|)。

解决方法

如果想要避免这种塌陷,可以通过下面两种方法解决:

  • 只给其中一个盒子设置外边距

  • 给两个盒子分别套一个父盒子,父盒子属性设置为 overflow:hidden,同时让父盒子是密闭区域,从而触发 BFC

父子盒子之间的塌陷

然而设置父盒子也不是万全的,当出现以下情况时外边距会塌陷:

  • 块元素 的 margin-top 与 它的第一个子元素 的 margin-top 之间没有 border、padding、inline content、clearance 来分隔。

  • 块元素 的 margin-bottom 与 它的最后一个子元素 的 margin-bottom 之间没有 border、padding、inline content、height、min-height、max-height 分隔。

同时,如果父子公用一段上边距区域,比如父盒子没有上边距时,子盒子设上边距。这时子盒子带着父盒子向下移动(相当于给父盒子设置外边距)就会产生盒子塌陷。


<style>
*{
margin:0px;
padding: 0px;
}
.div1{
width:300px;
height: 200px;
background-color: cornflowerblue;
margin:0px;
}
.div2{
background-color: wheat;
margin: 30px;
}
</style> <div class="div1">
<div class="div2">
div2
</div>
</div>

父元素不设置外边距,第一个子元素设置 margin:30px,会发现父元素与子元素一起往下移动了 30px:

解决方法

想要解决这种塌陷的核心办法是把父子盒子分隔开。我们可以给父盒子设置边框或者内边距,或者给父盒子标签添加 overflow:hidden 属性,通过触发 BFC 规则,也就是块级格式上下文,把父级渲染成一个独立区域,从而解决父子盒子之间的塌陷问题。

BFC 规则触发方式:

  • float 不为 none

  • overflow 不为 visible(常用 overflow:hidden)

  • position 为 fixed,absolute

  • display 为 flex,inline-block,table-cell

当然,在选择塌陷的解决方案时,应依据具体的情境,不能所有情况都使用相同的方案,否则会造成其他问题的出现哦~

那么,在我们学习以上知识后,就能清晰地知道开头引入的问题正是父子盒子间的塌陷,我们可以通过触发 BFC 规则(仅其中一种方案)来解决:

<style>
.image-div { /*子盒子*/
margin-top:25px;
}
.header-div { /*父盒子*/
overflow:hidden; /*触发bfc*/
}
<style>

以上就是 CSS 盒子边距常见的塌陷与解决办法,希望能够对你有所帮助。

推荐阅读

一文读懂浏览器存储与缓存机制

Python Type Hints 从入门到实践

CSS 盒子的边距塌陷的更多相关文章

  1. css - 盒子内外边距

    css - 盒子内外边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,padding会撑大盒子.在浏览器中显示的元素宽高包含了padding. div{     width:200px; ...

  2. 外边距塌陷之clearance

    在一个BFC中,垂直方向上相邻的块级盒子产生外边距塌陷,本文要说一个特殊的外边距塌陷情况,即当垂直方向上,两个块级盒子之间有个浮动元素相隔时,这个时候会产生什么样的效果呢? .outer{ overf ...

  3. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  4. CSS 基础 例子 盒子模型及外边距塌陷

    我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: ...

  5. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  6. 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

    盒子模型 Box  Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...

  7. CSS -- 盒子模型之边框、内边距、外边距

    一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...

  8. css盒子模型、垂直外边距合并

    css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...

  9. CSS盒子内容

    内边距 内边距(padding):内容与边框之间的距离 注意:padding 只能移动盒子的内容 padding属性联写: padding: 10px: 内边距的上下左右都移动 padding: 10 ...

随机推荐

  1. 在FLASH中读写结构体

    在FLASH中读写结构体 注意事项 编程(写数据)地址要对齐 写数据时,我们要指定写入的地址,如果写入地址为非对齐,则会出现编程对齐错误. 比如遵循32位(4字节)地址对齐,你的地址只能是4的倍数.0 ...

  2. Dapr实战(一) 基础概念与环境搭建

    什么是Dapr Dapr 是一个可移植的.事件驱动的运行时,可运行在云平台或边缘计算中.支持多种编程语言和开发框架. 上面是官方对Dapr的介绍.有点难以理解,大白话可以理解为:Dapr是一个运行时, ...

  3. mysql操作中卡死 解决方法

    1.使用指令查询当前进程 show full processlist; -- 查询全部当前进程; show processlist;-- 只列出前100条 2.找出卡死的进程id 3.删除卡死进程 k ...

  4. Java面向对象系列(3)- 回顾方法的调用

    方法的调用 静态方法 非静态方法 形参和实参 值传递和引用传递 this关键字(继承篇讲解) 静态方法 非静态方法 形参和实参 package oop.demo01; public class Dem ...

  5. Dapr + .NET Core实战(四)发布和订阅

    什么是发布-订阅 发布订阅是一种众所周知并被广泛使用的消息传送模式,常用在微服务架构的服务间通信,高并发削峰等情况.但是不同的消息中间件之间存在细微的差异,项目使用不同的产品需要实现不同的实现类,虽然 ...

  6. SAP Shared Object 01 (共享对象)

    介绍 共享对象是在共享内存中的一个对象.共享内存是应用服务器中的一个内存区域,可以被应用服务器中的所有程序访问. 在共享对象出现之前,ABAP使用EXPORT 和 IMPORT语句实现内存区域中内容的 ...

  7. 定要过python二级 第一套

    1.和强类型语言相对应的是弱类型语言,Python.JavaScript.PHP 等脚本语言一般都是弱类型的.弱类型语言有两个特点: 变量无须声明就可以直接赋值,对一个不存在的变量赋值就相当于定义了一 ...

  8. P4292-[WC2010]重建计划【长链剖分,线段树,0/1分数规划】

    正题 题目链接:https://www.luogu.com.cn/problem/P4292 题目大意 给出\(n\)个点的一棵树,然后求长度在\([L,U]\)之间的一条路径的平均权值最大. 解题思 ...

  9. 分布式、微服务必须配个日志管理系统才优秀,Exceptionless走起~~~

    前言 在真实的项目中,不管是功能日志.错误日志还是异常日志,已经是项目的重要组成部分.在原始的单体架构,通常看日志的方式简单粗暴,直接登录到服务器,把日志文件拷贝下来进行分析:而如今分布式.微服务架构 ...

  10. Java8通过Function获取字段名(获取实体类的字段名称)

    看似很鸡肋其实在某些特殊场景还是比较有用的.比如你将实体类转Map或者拿到一个Map结果的时候,你是怎么获取某个map的key和value.方法一:声明 String key1="name& ...