如何使Div高度与内部文本高度完全匹配？

你遇到的是浏览器默认字体度量机制导致的问题：字体本身会为字符的升部（如字母"b"的上半部分）和降部（如字母"g"的下半部分）预留空间，哪怕你的文本没有这类字符，容器也会保留这些额外间距。以下是几个实用的解决办法：

方法1：通过行高强制匹配字体尺寸 #

直接将line-height设置为与font-size一致的数值，或者使用相对值1（等同于字体大小的1倍），让行高刚好包裹文本内容：

.textBox {
  display: inline-block;
  font-size: 50px;
  line-height: 1; /* 也可以直接写 line-height: 50px; */
}

如果仍有细微偏差，可添加vertical-align: middle进行微调。

方法2：用text-box-trim精准裁剪留白（现代浏览器适用） #

这是CSS新增的属性，能直接移除文本周围的默认留白，让容器高度完全贴合文本的实际显示高度：

.textBox {
  display: inline-block;
  font-size: 50px;
  text-box-trim: both;
}

注意：该属性目前在Chrome、Edge等现代浏览器中支持较好，若需兼容旧版浏览器，建议优先使用方法1。

方法3：固定容器高度+溢出隐藏 #

如果上述方法仍有问题，可以直接将容器高度设为字体大小，再通过overflow: hidden裁剪掉超出容器的部分：

.textBox {
  display: inline-block;
  font-size: 50px;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
}

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