蓝色与红色div间有莫名间隙？调整padding、margin始终无效

这个空白间隙不是蓝色、红色两个div自身的padding或margin导致的，是两个容易被忽略的浏览器原生默认样式共同作用的结果：

• 浏览器会给所有原生<p>标签自动添加默认上下外边距（常规值为上下1em，随标签字体大小动态变化）
• 蓝色的#title容器没有建立独立的块格式化上下文，内部<p>标签的下外边距会发生外边距穿透（Margin Collapse），直接穿出蓝色div的下边界，成为两个div之间可见的空白；同时红色#strip容器内部<p>标签的上默认外边距，也会叠加贡献部分间隙宽度

你之前反复调整两个div本身的padding、margin都无法消除间隙，本质是问题源头根本不在这两个容器上——产生间隙的边距属于内部的<p>标签，还“藏”在容器边界外侧，自然调整容器属性碰不到根源。

可根据代码习惯任选以下方案处理：

• 全局清除元素默认样式（最推荐，从根源避免同类问题）
  在CSS代码最开头添加全局重置规则，清掉浏览器自带的所有元素默认边距：

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

• 不做全局重置的针对性修复
  1. 单独给两个div内部的<p>标签去掉默认边距，添加规则：

     #title p, #strip p {
       margin: 0;
     }
     

  2. 给蓝色的#title容器添加触发块格式化上下文的属性（比如overflow: auto;），阻止内部<p>标签的外边距穿透容器边界

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