So erstellen Sie den angegebenen Abstand zwischen dem Ende einer Zeile und der Basislinie der zweiten Zeile mit css

Question

Ich habe ein Szenario, in dem ich den angegebenen Abstand zwischen dem Ende der ersten Zeile und der Basislinie/Ende der zweiten Zeile verwenden sollte ein Absatzelement, das CSS verwendet. Könnte mir jemand den besten Weg vorschlagen, dies zu erreichen?

Das Bild unten erwähnt das gleiche.

Dank.

Answer 1

setzen Sie margin-bottom auf <p> Tags verwenden, die minus, um die gewünschte Raum line-height entspricht.

Ich bin nicht sicher, ob Sie dynamische Berechnungen ausführen können, aber da sie einen präzisen 43px Abstand gefragt, so scheint es 23px vorausgesetzt, die font-size ist 16px während line-height ist 20px

43 zu sein - 20 = 23

Hier ist eine grundlegende Demo:

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/

ich JavaScript bin zu raten, würde für eine dynamische Lösung erforderlich. Andernfalls programmieren Sie jeden Wert hart, indem Sie Klassen deklarieren.

Answer 2

Sie können sich nähern, indem Sie die line-height gleich der font-size setzen.

Zum Beispiel:

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

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

In diesem Fall wissen Sie jetzt, da 12px zwischen dem Boden jedes Element ist, so dass Sie einen unteren Rand auf die erste und diese Zahl hinzufügen plus 12 wird Ihre Entfernung.

Answer 3

Von dem, was ich verstehe, u brauchen nur

line-height: 43px;