如何使p标签内span的border-bottom与同级p标签边框保持相同间距？

这问题我之前也踩过坑！默认情况下，inline元素的边框是和文字基线对齐的，所以span的红色边框才会比p的黑色边框高出一截。想要让两者边框完全对齐，同时兼容长文本换行的场景，这里有两种靠谱的方法：

方法一：内边距+负外边距（精准可控） #

这种方法不修改display属性，完美解决长文本换行后边框消失/错位的问题。核心思路是用内边距把span的边框往下推，再用负外边距抵消内边距带来的行高变化，保证布局不受影响：

p {
  border-bottom: 1px solid black;
  line-height: 2em;
  margin: 0;
}
span {
  border-bottom: 1px solid red;
  /* 计算行高与文字实际高度的差值，把边框推到行框底部 */
  padding-bottom: calc(2em - 1.2em);
  /* 负外边距抵消内边距，避免行高被撑大 */
  margin-bottom: calc(-(2em - 1.2em));
}

说明： #

• 1.2em是默认的文字行高（不同字体可能略有差异，你可以根据实际情况微调这个数值）
• 不管span内的文本换多少行，每一行的红色边框都会和下方p的黑色边框保持同一高度，完全符合需求

方法二：vertical-align快捷法（简单易用） #

如果不需要极致的精准度，直接给span添加vertical-align: bottom也能快速实现对齐效果，它会让span的边框和行框的底部对齐：

span {
  border-bottom: 1px solid red;
  vertical-align: bottom;
}

说明： #

• 这种方法在大多数常规字体和行高设置下都有效，但遇到特殊字体或者复杂排版时，可能会有细微偏差

完整示例代码 #

<p><span>My bottom-border really needs to be lower. This way it's just ugly and I hate how I can't just move my span-border around a bit without using display:block or inline-block. Booohoooo </span></p>
<p>bla</p>
<p>bla</p>
<p>bla</p>

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