Question

我需要有一个 span （在p内），其边框为底边，后面是一个常规的 p ，该边框也为底边。我想让两个边界之间都具有相同的空间。这意味着我要使跨度元素更大，以便边框向下移动。

现在，使用较小的跨度元素，我可以只使用display：inline-block。但是我的文本重排很长，使用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;
}

边框和文本之间的间距

2 个答案: