元素与虚线框间未知额外空白排查：非内边距/外边距问题

这种情况我之前也碰到过，排除padding和margin之后，最核心的原因其实是行高（line-height）的默认行为，还要结合替换元素与非替换元素的盒模型差异来看：

• 对于<p>、<h3>这类非替换的块级文本元素，它们的高度由line-height和font-size共同决定。浏览器默认的line-height: normal会给文本上下预留一些额外空间（这是为了兼容不同字体的特殊字符，比如带上下标、装饰线的字符）——哪怕你把padding和margin都设为0，这个由行高带来的「隐形空间」依然存在。你的虚线框（不管是用border还是outline实现）是围绕元素整个content box的，自然就会和文本之间出现空白。
• 而<img>是替换元素，它的高度完全由自身图片尺寸决定，不存在行高带来的额外空间，所以虚线框能完美贴合边缘。

解决办法 #

1. 调整line-height：把line-height设为1（或者根据所用字体微调，比如1.1，避免某些字体的字符被截断），让元素的content box高度和文本实际高度对齐：

p, h3 {
  line-height: 1;
  /* 如果用了自定义字体，可尝试line-height: 1.05来适配 */
}

2. 如果用了outline，换成border试试：部分浏览器对文本元素的outline计算会包含字体的上升/下降值，换成border（前提是padding已设为0）可能会更贴合文本边缘。
3. 检查字体影响：某些字体的默认字符间距或行高偏大，也可能加剧这个问题，可以换个字体测试，或者给字体设置更精确的line-height。

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