如何使用css在一行的结尾和第二行的基线之间创建指定的距离

Question

我有一个场景，我应该使用css在第一行的结尾和段落元素的第二行的基线/结尾之间使用指定的距离。有人可以建议我实现它的最佳方法。

下图提到了相同的内容。

感谢。

Answer 1

您可以在margin-bottom代码上使用<p>，等于所需空间减去行高。

我不确定您是否可以运行动态计算，但由于您要求精确的43px间距，假设23px为font-size，似乎16px而line-height是20px

  

43 - 20 = 23

以下是基本演示：

p {
  /* reset all spacing */
  margin: 0;
  padding: 0;
  position: relative;
  /* assume the following font settings */
  font-size: 16px;
  line-height: 20px;
  /* apply bottom margin */
  margin-bottom: 23px;
}

/* optional: remove margin from last p tag */
p:last-of-type {
  margin-bottom: 0;
}

/* just for demonstration */
p:nth-of-type(1):after {
  content:'';
  height:43px;
  width:3px;
  background:hotpink;
  position: absolute;
  bottom:-38px;
  left: 0;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod porro quidem quae perferendis amet fuga id eveniet totam quis sapiente, in tempora commodi eaque, error doloremque neque adipisci! Enim, eos.</p>

<p>Maxime, dicta. Voluptatum quaerat, repellendus tempore veritatis vero voluptate inventore animi doloribus optio nulla non quisquam aperiam ratione labore quasi beatae doloremque. Tenetur possimus nisi minus, sed asperiores unde natus.</p>

jsFiddle：https://jsfiddle.net/azizn/8u4n5n5y/

我猜测动态解决方案需要JavaScript。否则，通过声明类来对每个值进行硬编码。

Answer 2

您可以将line-height设置为等于font-size。

例如：

<style>
  p {
    font-size: 12px;
    line-height: 12px;
    margin: 0;
  }
</style>

<p>one</p>
<p>two</p>

在这种情况下，您现在知道每个元素的底部之间有12px，因此您可以为第一个元素添加一个底部边距，该数字加上12将是您的距离。

Answer 3

据我所知，你只需要把

line-height: 43px;