如何使用css創建一條線的末尾和第二條線的基線之間的指定距離

我有一個場景，我應該使用第一條線的末尾和第二條線的基線/末端之間的指定距離使用css的段落元素。有人可能會建議我實現它的最佳方法。如何使用css創建一條線的末尾和第二條線的基線之間的指定距離

下圖提及相同。

謝謝。

來源

2016-04-14 Madav

您可以使用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將需要一個動態的解決方案。否則，通過聲明類來硬編碼每個值。

來源

2016-04-15 04:11:09 Aziz

您可以通過設置line-height等於font-size來關閉。

例如：

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

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

在這種情況下，你現在知道有每個單元的底部之間12px，這樣你就可以添加一個底緣至第一，這個數字加上12將是你的距離。

來源

2016-04-14 17:34:19 aw04

OP意味着兩個段落之間的間距不是每個句子的行高。 – Aziz

@Aziz我有兩個段落。事實上，在你自己的答案中，這種方法看起來非常相似。請解釋你的意思 – aw04

他們之間沒有距離 - https://jsfiddle.net/azizn/kf411bxz/ OP想要43px的距離 – Aziz

從我瞭解你剛剛需要把

line-height: 43px;

來源

2016-04-14 17:45:14

對不起，我需要從第一段的最後一行到第二段的第一行（從基線）起43px。但是，每個段落都有自己的行高。在這種情況下，將 – Madav

添加到頁邊距底部; p {margin-bottom：43px; } 但這會使空間爲43px + font-size;所以如果你的字體大小是12. ，並且如果你希望這隻適用於特定的段落，那麼你可以使邊距稍微減少一些，例如31px，然後添加一個類並使用類而不是p –

@ MostafaFateen行高而不是字號 – aw04

如何使用css創建一條線的末尾和第二條線的基線之間的指定距離

回答

相關問題