DIV元素间14px间隙及浮动页脚问题求助

这种莫名的隐形间隙真的很磨人，我之前也踩过类似的坑，结合你的描述，大概率是这几个常见原因导致的，给你逐一排查和解决的思路：

• 空白字符渲染导致的间隙
  如果你的两个DIV代码之间有换行、空格或者制表符，浏览器会把这些当成空白字符处理。尤其是当DIV的display属性设为inline-block时，就会出现这种肉眼可见但检查元素时找不到margin/padding的间隙。
  解决办法：

  • 把两个DIV的代码写在同一行：<div>内容</div><div>内容</div>
  • 给父容器设置font-size: 0;，然后在子DIV里重新设置需要的font-size
  • 用注释消除中间的空白：<div>内容</div><!-- --><div>内容</div>

• 行内元素基线对齐的坑
  同样是inline-block类型的元素，浏览器默认会按照文字基线对齐，这会在元素底部留出一小段空间（刚好和你说的14px左右匹配，具体大小和字体设置有关）。
  解决办法：

  • 给DIV设置vertical-align: top;或者vertical-align: middle;，强制改变对齐方式
  • 直接把DIV的display改成block，彻底脱离行内元素的布局规则，自然就不会有对齐间隙了

• 父元素继承属性的影响
  有时候父容器的line-height或者font-size会被子元素继承，哪怕你没给子DIV设置这些属性，继承的值也可能间接导致间隙。可以检查父元素的相关样式，必要时给子DIV单独设置line-height: 0;或者重置font-size来覆盖继承值。

• 浏览器默认样式排查
  虽然你说已经检查了margin和padding，但还是可以用全局重置样式快速排除浏览器默认样式的干扰：

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

优先排查前两个原因，这是最常见的“隐形间隙”元凶，找到根源后就不用依赖负margin这种临时方案啦。

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