space 跨度中的边框和文本之间

Question

我需要一个 span（在 p 内），底部有边框，然后是一个常规的 p，它也有一个边框-底部。我想让两个边框在它们之间具有相同的 space。这意味着我想让 span-element 变大，这样边框就会向下移动。

现在，对于较小的跨度元素，我可以只使用 display:inline-block。但是我有很长的重排文本，使用内联块删除了文本的边框。

这是我想要的示例。我希望（第二条）红线在第一条黑线的高度上向下移动。

p {border-bottom: 1px solid black;
line-height: 2em;
margin:0;
}
span {border-bottom: 1px solid red;
}

<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>

Answer 1

向跨度添加一些填充

p {
  border-bottom: 1px solid black;
  line-height: 2em;
  margin: 0;
}

span {
  border-bottom: 1px solid red;
  padding-bottom:0.5em;
}

<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>

Answer 2

能否添加和修改 css 和 html 代码，如下所示。

HTML:

<p class="with_red_border"><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>

CSS:

p {
    border-bottom: 1px solid black;
    line-height: 2em;
    margin:0;
}
span {
    border:none;
}
.with_red_border {
    position: relative;
}
.with_red_border::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: red;
    height: 1px;
}

space 跨度中的边框和文本之间

space between border and text in span

html

css

border