Html 如何使用css在一条直线的端点和第二条直线的基线之间创建指定的距离

Html 如何使用css在一条直线的端点和第二条直线的基线之间创建指定的距离,html,css,Html,Css,我有一个场景,在使用css的段落元素中,我应该使用第一行末尾和第二行基线/结尾之间的指定距离。有人能给我建议实现这一目标的最佳方法吗 下图也提到了同样的情况 谢谢。您可以通过将行高设置为字体大小来接近 例如: <style> p { font-size: 12px; line-height: 12px; margin: 0; } </style> <p>one</p> <p>two</p>

我有一个场景,在使用css的段落元素中,我应该使用第一行末尾和第二行基线/结尾之间的指定距离。有人能给我建议实现这一目标的最佳方法吗

下图也提到了同样的情况


谢谢。

您可以通过将
行高设置为
字体大小来接近

例如:

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

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

p{
字体大小:12px;
线高:12px;
保证金:0;
}
一个

两个


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

据我所知,您只需要将

line-height: 43px;

您可以在
标记上使用
边距底部
,该标记等于所需空间减去行高

我不确定您是否可以运行动态计算,但由于您要求精确的
43px
间距,假设
font size
16px
,而
行高
20px

43-20=23

这里是一个基本演示:

p{
/*重置所有间距*/
保证金:0;
填充:0;
位置:相对位置;
/*采用以下字体设置*/
字体大小:16px;
线高:20px;
/*应用底边距*/
边缘底部:23px;
}
/*可选:从最后一个p标记中删除边距*/
p:最后一种{
页边距底部:0;
}
/*只是为了示范*/
第n种类型(1):之后{
内容:'';
高度:43px;
宽度:3倍;
背景:火红;
位置:绝对位置;
底部:-38px;
左:0;
}
Lorem ipsum door sit amet,Concertetur adipising elit。在一般情况下,我甚至可以用智慧来表达我的观点,这是一个错误!埃尼姆,eos


马克西姆,格言。在某种程度上,时间真实性的驱避物是发明者的自由选择权,而非劳动理性的驱避物是一种类似于自由的驱避物。很抱歉,从第一段最后一行到第二段第一行(从基线开始),我需要43px。但是,每个段落都有自己的行高。在这种情况下,添加到p a边距底部;p{margin bottom:43px;}但这将产生一个43px+字体大小的空间;因此,您可以将边距减小一点,例如,如果字体大小为12,则为31px。如果你只想在特定的段落中出现这种情况,那么就添加一个类,并使用该类而不是p@MostafaFateen行高而不是字体大小OP是指两段之间的间距,而不是每个句子的行高。@Aziz我有两段。事实上,这似乎与您自己的答案中的方法非常相似。请解释你的意思他们之间没有距离-OP想要的距离是43px@Aziz读我的最后一段,你是什么意思?用更多的文本行测试您的解决方案,您将看到它是如何工作的。距离在哪里?您只有一个12px的行高度。