为何p元素margin-bottom在元素盒外（无背景），button的却在盒内？

哈哈这个问题问到点子上了！我当初第一次碰到这种差异的时候也愣了半天，其实核心是两个点：元素的默认display类型和CSS外边距折叠机制，咱们掰开揉碎了说：

1. 为什么p的margin-bottom会出现盒外无背景的空白？ #

<p>是浏览器默认的块级元素（block），而块级元素有个特别的规则：垂直外边距折叠（Margin Collapse）。

简单来说，如果你的<p>放在一个没有设置border、padding、overflow: hidden这类属性的父容器里，它的margin-bottom会和父容器的外边距“合并”——相当于这个margin不是属于<p>自身的下方空间，而是变成了父容器整体的下方空白。这个空白区域不属于<p>的盒模型范围（背景色只覆盖content+padding+border），所以自然就显示页面或父容器的背景色，看起来像是“不受CSS背景色影响”。

2. 为什么button的margin-bottom看起来像被背景覆盖？ #

首先纠正一个小误区：任何元素的margin区域都不会被自身的背景色覆盖，背景色永远只填充到border为止。你看到的“被背景覆盖”其实是另一个原因：

<button>默认是inline-block级元素（不同浏览器可能有细微差异，但基本都是这个类型），而inline-block元素的垂直margin不会触发外边距折叠。也就是说，button的margin-bottom是实实在在属于它自身下方的独立空间，这个空间如果父容器有背景色，就会显示父容器的背景，看起来像是被“覆盖”了，但本质上不是button自己的背景延伸过去了。

最后说下你用padding解决问题的思路 #

你把<p>的margin设为0，用padding-bottom代替的方法非常靠谱——因为padding属于元素盒模型的内部空间，既不会触发外边距折叠，又会被背景色完全覆盖，完美避开了块级元素margin的这个“坑”。

内容的提问来源于stack exchange，提问作者nCardot