为何给.card加padding后.title上方出现大间隙？需设margin-top:0？

• 核心原因就是外边距折叠（Margin Collapse），而且确实和h1的默认margin有关。
• 浏览器给h1这类标题标签自带了默认的上下外边距（比如margin-top一般是1em左右），这是浏览器默认样式的一部分。
• 没给.card加padding时，父元素（.card）没有padding、border、overflow这些“阻隔”属性，子元素h1的margin-top会和父元素的margin发生折叠——简单说就是h1的上边距会“跑到”父元素外面去，不会在父元素内部形成空白，所以你看起来布局正常。
• 当给.card加上8px padding后，父元素有了内边距，直接打破了外边距折叠的条件，这时候h1的默认margin-top就会在父元素的padding内部生效，相当于在.card的上padding和h1之间多了一块h1默认上边距的空白，所以你就看到了额外的大空白。
• 给h1设置margin-top:0，就是把它自带的上边距去掉，自然就消除了这块空白。

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