如何消除div边框与内部特殊字符字体之间的间隙？

我的CSS代码：

div {
  border: 1px solid
  font-size: 30px
  color: red
  width: fit-content
  height: fit-content
}

我的HTML代码：

<div>&#11165;</div>

当前浏览器显示效果：

我希望消除div边框与其中特殊字符⮝之间的间隙，达到如下目标效果：

请问该如何实现此效果？如果空白区域是字符本身的一部分，那是否就无法实现了？

你看到的间隙大概率是字符本身的字体度量空间（比如行高、字距、字形自带的空白区域），而非div的内边距或外边距，可尝试以下几种方法解决：

1. 调整行高与垂直对齐 #

通过缩小行高并设置垂直对齐，减少垂直方向的间隙：

div {
  border: 1px solid;
  font-size: 30px;
  color: red;
  width: fit-content;
  height: fit-content;
  line-height: 0.8; /* 根据字符实际渲染效果微调数值 */
  vertical-align: middle;
}

2. 消除行高影响 #

用line-height: 0彻底去掉行高带来的垂直空白，再通过伪元素辅助对齐：

div {
  border: 1px solid;
  font-size: 30px;
  color: red;
  width: fit-content;
  height: fit-content;
  line-height: 0;
}
div::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

3. 微调内边距/负外边距 #

如果是字符左右两侧的间隙，可通过调整内边距或设置负外边距修正：

div {
  border: 1px solid;
  font-size: 30px;
  color: red;
  width: fit-content;
  height: fit-content;
  margin: 0 -1px; /* 负外边距缩小左右空间，也可用padding微调 */
}

4. 更换字体 #

不同字体对特殊字符的渲染间距差异极大，尝试换用更紧凑的字体（如等宽字体、图标字体）：

div {
  border: 1px solid;
  font-size: 30px;
  color: red;
  width: fit-content;
  height: fit-content;
  font-family: monospace, 'Arial Narrow', sans-serif;
}

如果以上方法都无效，说明该特殊字符本身的字形就包含空白区域，这种情况下无法通过CSS完全消除间隙，建议替换为更贴合的字符或SVG图标。

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