inline-block类型span元素是否存在最小高度限制？

嘿，我碰到过类似的印刷排版问题，尤其是处理身份证这种对尺寸精度要求极高的场景，给你几个针对性的解决方案：

你遇到的核心问题其实有两个：浏览器默认的最小字体限制，以及inline元素（span）的默认间距无法随字体缩小而调整。结合你不能修改HTML、不能用相对定位的限制，试试下面的CSS方案：

1. 突破浏览器最小字体限制 #

多数现代浏览器（比如Chrome、Firefox）默认会限制字体大小不低于12pt，防止文字过小无法阅读，但印刷场景需要突破这个限制。添加以下CSS强制取消这个限制：

span {
  /* 针对WebKit内核浏览器（Chrome、Safari） */
  -webkit-text-size-adjust: none;
  /* 标准属性，兼容其他现代浏览器 */
  text-size-adjust: none;
  /* 设置你需要的极小字体，比如8pt */
  font-size: 8pt;
}

2. 精准控制span的间距 #

span作为inline元素，默认会继承父元素的letter-spacing、word-spacing和line-height，这些属性可能在字体缩小时依然保持固定值，导致间距无法缩小。可以重置这些属性来贴合极小字体：

span {
  /* 重置字符间距 */
  letter-spacing: 0;
  /* 重置单词间距 */
  word-spacing: 0;
  /* 行高设为与字体大小一致或更小，避免额外垂直间距 */
  line-height: 1;
  /* 去掉默认的内外边距 */
  margin: 0;
  padding: 0;
}

3. 可选：用inline-block优化排版控制 #

如果上面的方案还不够，试试将span设为inline-block，这样可以更精准地控制元素的尺寸和间距，同时不会影响长标题的换行（满足你不能用相对定位的需求）：

span {
  display: inline-block;
  font-size: 7pt;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  letter-spacing: 0;
  word-spacing: 0;
  line-height: 0.9;
  margin: 0;
  padding: 0;
  /* 若需要强制单行显示长标题，可添加下面这行；不需要则删除 */
  /* white-space: nowrap; */
}

额外提示 #

因为你是印刷场景，建议继续用pt单位（你已经在这么做了，非常正确），它是印刷行业的标准单位，比px更精准。另外，导出印刷文件时，尽量用Chrome的“打印为PDF”功能，它对CSS的支持更贴合印刷需求。

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