盒模型：CSS 世界的物理法则，margin 塌陷与 padding 的恩怨情仇

2026-03-13 5 纸飞机账号购买

怎么会两个div的margin居然就好似“手牵手”般变为一个人了呢？为何给元素添上padding后，它类似充了气一般逐渐变大了呢？今日我们借助快递包裹的比方，一次性弄明白CSS盒模型的全部坑点。

前言

在页面之中，每个HTML元素均呈现为一个“盒子”，于浏览器对页面予以渲染之际，会针对每个盒子的尺寸以及位置展开计算，而这一套规则便是盒模型，尽管表面看似简易，然而诸如margin塌陷、box-sizing的选择等之类的问题，常常致使新手，甚至老手都陷入抓狂的状态，今日我们便要对盒模型进行彻底的拆解，用以使得你不再为布局而发愁。

一、盒模型的四兄弟：从里到外

想象你在寄一个快递，盒模型由内到外包括四部分：

于CSS里，有这样一种情况，一个元素的实际占位宽度，它所计算的方式是，等于width加上padding - left或者padding - right，再加上border - left或者border - right，最后加上margin - left或者margin - right，这是在标准盒模型的状况之下。要留意的是，背景色会向着padding区域进行延伸，然而却不会延伸到margin那里。

二、两种盒模型：标准 vs 怪异（IE）

CSS有两种盒模型，区别在于width的计算范围不同。

看个例子：

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

挑选哪一个更为合适呢？在现代开发进程当中，几乎全都举荐border-box，这是由于它更加契合直觉，那就是你设定了怎样的数值，盒子所占据的空间便是多少（不涵盖margin）。众多框架（像是Bootstrap）也对全局的box-sizing进行了重置。

* {
  box-sizing: border-box;
}

三、margin塌陷：那些“手牵手”的兄弟

CSS里，margin塌陷属于最反直觉的现象其一，有特定三种情况，是这样的。

1. 相邻兄弟元素的margin合并

两类块级的兄弟元素，处于上面的那个，它的margin-bottom，以及处于下面的那个，它的margin-top，这两者会出现合并的情况，所取的值是它们二者之中的最大值，并非是将两者进行相加。

上盒子
下盒子

最终两个盒子的间距是30px，不是50px。

生活有这样一种比喻情形，有两个人处于站在一起那般状态，其中的一个人出现朝着后方退步20厘米的情况，另外一个人则是朝着后方退步30厘米，最终呈现出他们相互之间的距离是30厘米这样的结果，这里是那个退得远的人对于彼此之间的距离起到了决定性作用，而并非是50厘米。

2. 父子元素的margin传递

倘若父辈元素并无边框、内边距、内容之类进行分隔之时，子辈元素的上边距将会“传导”至父辈元素，致使父辈元素一同向下位移。


  子元素

你期望子元素与父元素顶部之间的距离为30px，然而事实上，父元素整个向下移动了30px，子元素紧紧黏附在父元素顶部。

缘由：倘若父元素不存在隔离情形（像是border、padding、overflow之类）时，父元素首个子元素的margin-top会致使其与父元素的margin-top出现合并状况，进而产生这般“拖家带口”的现象。

3. 空块元素的margin折叠

一个块元素，它是空的，没有内容，没有padding，没有border，没有高度，其上下margin会合并，最终取最大值。


下面的元素

这个空着的盒子，其上面以及下面的外边距合并成为了30像素，致使和下面的元素之间实际所存在的间距是30像素，并非50像素。

四、如何解决margin塌陷？

既然知道了坑，我们就有多种办法填平它。

1. 给父元素设置border或padding

.parent {
  border-top: 1px solid transparent;  /* 或者padding-top: 1px */
}

这就像在父子之间加了一道“隔离墙”，阻止margin传递。

2. 触发BFC（块级格式化上下文）

BFC能够被视作一块自成一体的领域，其内部所含的元素并不会对外部造成干扰。引发BFC的方式具备：

例如：

.parent {
  display: flow-root;  /* 创建BFC，阻止margin传递 */
}

3. 用flex或grid布局

布局方式为现代的情形下，天然于边缘塌陷方面得以避免，是因在进行布局时，弹性盒或网格容器的子元素，不再依照常规流里的边缘合并规则。

.parent {
  display: flex;
  flex-direction: column;
}

4.，兄弟之间要是不愿意合并，那该如何去处理呢？五、padding以及border：此乃致使元素“膨胀”的奥秘所在。

于你给某一元素添加上padding或者border时，其实际的占位会出现变大的情况（在标准盒模型环境之下而言），此种情况极有可能对布局造成破坏。这同样也是我们之所以推荐border-box的缘由所在。

比方说，你打算制作一个宽度为百分之五十的卡片，其内部边距是二十像素。要是运用标准盒模型，你就得依靠手动进行计算：宽度设置为计算得出的百分之五十减去四十像素。要是采用边框盒模型，直接写成宽度设为百分之五十，内边距设为二十像素，如此便堪称完美了。

有个小技巧，在调试的时候，能够于浏览器开发者工具当中查看盒模型的可视化情况，Chrome的Computed面板会把各部分尺寸清晰地展示出来。

六、总结：盒模型避坑口诀

对于盒模型的掌握，意味着你掌握了CSS布局的“物理法则”。当再次碰到margin合并时，你能够从容地拿出BFC这道护身符。期望这篇文章对你有所助益，欢迎留言分享你所遭遇的盒模型趣事！

明日预告：关于Flexbox的完全指南，它从被称作“一维战神”转变到成为“布局神器”，会手把手教你去玩转弹性盒子。