如何实现左侧边框高度匹配文本视觉块高度而非父元素物理高度？

这个问题我之前也帮人处理过，核心痛点就是原生border-left是跟着元素的盒模型高度走的，而不是文本实际的视觉范围——毕竟元素高度会包含行高、隐性间距这些“看不见”的空间，所以才会出现边框上下超出来的情况。给你两个实用的解决方案，你可以根据布局需求选：

方案一：用伪元素模拟边框（最灵活，适配全屏宽度） #

把原来的border-left换成伪元素，这样能精准控制边框的垂直范围，完美贴合文本的cap height到descender：

.line-left-blue {
  position: relative; /* 给伪元素提供定位参照 */
  padding-left: 14px; /* 保留原来的内边距，避免文本贴边框 */
}

.line-left-blue::before {
  content: "";
  position: absolute;
  left: 0;
  /* 这里的0.1em是基于字体大小的偏移，你可以根据用的字体微调 */
  /* 比如字体的descender特别长，就把bottom调大一点，反之则减小 */
  top: 0.1em;
  bottom: 0.1em;
  width: 8px;
  background-color: #007dc3;
}

h2 {
  margin: 0;
  line-height: 1.2; /* 统一行高，避免额外空白 */
}

.line-left-blue > div {
  margin: 0;
  line-height: 1.2;
}

为什么这个方法好用？因为em单位是跟着当前字体大小走的，不管屏幕怎么变、文本怎么换行，边框的偏移量都会自动适配字体的视觉范围，你只需要微调top和bottom的数值就能完美贴合。

方案二：用inline-block让容器贴合文本（适合不需要全屏宽度的场景） #

如果你的文本块不需要占满整个容器宽度，也可以试试把父元素改成inline-block，让它的高度自动贴合文本行框：

.line-left-blue {
  display: inline-block;
  border-left: 8px solid #007dc3;
  padding-left: 14px;
  margin: 0;
  vertical-align: baseline; /* 让容器对齐文本基线，减少多余空间 */
}

h2, .line-left-blue > div {
  margin: 0;
  line-height: 1.2;
}

这个方法更简单，但缺点是inline-block的元素不会自动占满宽度，适合局部文本块的场景。

小提示 #

不管用哪个方案，记得把文本元素的margin都设为0，避免隐性的空白空间影响高度；统一行高也能让文本的视觉范围更规整，方便边框定位。

内容的提问来源于stack exchange，提问作者T-Design