为什么我的<p>标签与上方内容间距过大？附相关文件及效果截图

核心原因&对应修复方法 #

• 浏览器默认样式自带边距
  主流浏览器默认给<p>标签设置了上下1em的外边距，如果你没有提前重置全局默认样式，这个默认边距会直接生效，是最常见的间距过大原因。
  修复方案：
  1. 全局重置默认样式，在CSS文件最开头添加如下代码：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  2. 单独控制<p>标签的上边距：

  p {
    margin-top: 0;
    /* 可根据需要自定义数值，比如margin-top: 6px; */
  }
  

• 垂直外边距塌陷
  如果<p>标签上方的元素设置了margin-bottom，两个垂直方向的外边距会发生塌陷，最终间距取两个边距的最大值，而非两者相加，导致间距超出预期。
  修复方案：
  可以统一给块级元素只设置单向边距（比如所有块级元素都只设置下边距，不设置上边距）规避塌陷，也可以给上方元素添加overflow: hidden触发BFC消除塌陷。
• 行高或内边距设置过大
  如果你给<p>标签设置了过高的line-height或者padding-top，也会导致视觉上的上方间距过大，检查对应CSS属性调整数值即可。

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