Wie entferne ich die Zeilenhöhe vom Anfang des Textes?

Ich verwende ein linkes floated Bild neben Text mit einer Zeilenhöhe von 2.Wie entferne ich die Zeilenhöhe vom Anfang des Textes?

Wie kann ich den oberen Rand des Bildes an den Anfang des Textes ausrichten?

den Raum durch die line-height erstellt Einstürzen (rot markiert im Screenshot unten), indem Sie die Zeilenhöhe auf 1 reduziert oder kleiner für alle des Textes ist keine Option für dieses Projekt.
Dies ist auch Teil des Standardstils, der im Inhalt der Website verwendet wird, so dass die manuelle Anpassung der Marge für jedes Vorkommen nicht möglich ist.
Dies ist kein Einzelfall. Es kann nur Text, nur ein Bild, Bild gefolgt von Text oder Text Bild für Bild sein. Der Text darf eine Überschrift oder ein Absatz sein.

Gibt es eine Möglichkeit, den oberen Teil der Zeilenhöhe zu entfernen und den unteren Teil der Zeilenhöhe zu verdoppeln?

Markup of issue

.left { 
 
    float:left; 
 
} 
 
.text { 
 
    line-height:2; 
 
}

<div> 
 
    <img class="left" src="https://placehold.it/60x60"> 
 
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
</div>

JSFiddle

Während die ::first-line Pseudoelement kommen nicht nahe, was ich bin zu tun versuchen, es funktioniert nicht zu reduzieren Zeilenhöhe in Firefox noch es bietet t er korrigiert die Zeilenhöhe zwischen der ersten Zeile und der zweiten Textzeile , wenn er umgebrochen ist. Hier gesehen: http://jsfiddle.net/Dqmu8/25/

Quelle

2016-03-29 block14

I don‘ Ich denke, es gibt ein Gutes Möglichkeit, dies richtig zu machen, außer die Höhe des Textes mit JS zu messen, diese von der Zeilenhöhe zu subtrahieren und einen negativen Rand hinzuzufügen. – Oriol

@Oriol Ich habe auf eine CSS-Lösung gehofft, aber wenn das nicht möglich ist, können Sie mit einer JS-Lösung antworten, die mit den meisten Schriftarten funktioniert, sei es in Absätzen oder Kopfzeilen? – block14

Ich glaube, dass Sie überprüfen müssen, welche Zeilenhöhe tatsächlich ist und warum Sie sie nicht nur von oben entfernen können. – Rob

So meinen Sie?

Mit Bild

.left { 
 
    float:left; 
 
    margin-top: 10px; 
 
} 
 
.text { 
 
    line-height:2; 
 
} 
 
div img + .text { 
 
    margin-top: -10px; 
 
}

<div> 
 
    <img class="left" src="https://placehold.it/60x60"> 
 
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
</div>

Ohne Bild

.left { 
 
    float:left; 
 
    margin-top: 10px; 
 
} 
 
.text { 
 
    line-height:2; 
 
} 
 
div img + .text { 
 
    margin-top: -10px; 
 
}

<div> 
 
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
</div>

Quelle

2016-03-29 19:53:19 LGSon

Dies ist das korrekte Ergebnis, jedoch sollte nur Text neben einem Bild (Bild, das nach links oder rechts verschoben wurde) auf diese Weise ausgerichtet werden. Wenn nur Text angezeigt wird, möchte ich den Rand nicht anpassen. – block14

@ block14 Verfolge ältere Antworten und finde das. Hat mein Update es so gelöst, wie Sie es wollten? – LGSon

Dies ist wahrscheinlich am nächsten zu dem, mit dem ich endete. Ich habe eine Liste von Zeilenhöhenfixes erstellt wie: '.clearfix img.left + h3 {margin-top: -. 5em}'. Eines Tages, wenn "hat" in CSS übernommen wird, werde ich die Änderung vornehmen. – block14

Schauen Sie sich diese. Ist es das, was du brauchst?

.left { 
 
    float:left; 
 
    margin-top: .5em; 
 
} 
 
.text { 
 
    line-height:2; 
 
}

<div> 
 
    <img class="left" src="https://placehold.it/60x60"> 
 
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
</div>

Quelle

2016-03-29 19:56:23

Gibt es eine Lösung, die auch Header betrifft? https://jsfiddle.net/3h4es7ma/3/ – block14

Ich war im Begriff, eine ähnliche Antwort zu posten, Sie sollten jedoch einen negativen .5em oberen Rand zum Text hinzufügen. – trex005

@ block14 Ja, um mit einem beliebigen Textelement zu arbeiten, fügen Sie das Bild in das Textelement ein. – trex005

So etwas wie das?

.left { 
 
    float:left; 
 
    margin-right: 10px; 
 
} 
 

 
.right { 
 
    float: right; 
 
    margin-left: 10px; 
 
} 
 

 
.content p { 
 
    line-height: 2; 
 
} 
 

 
.content img { 
 
    margin-top: 10px; 
 
}

<div class="content"> 
 
    <img class="left" src="https://placehold.it/60x60"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p></p> 
 
    <img class="right" src="https://placehold.it/60x60"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    <p></p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
</div>

Quelle

2016-03-29 20:07:02

Diesen Stil:

.text { 
    transform: translateY(-0.6em); 
}

Fiddle

Quelle

2016-03-29 20:48:09

Zeilenhöhe von 2 wird 1/2 ein em über der Linie setzen und 1/2 ein em unten die Linie. Sie müssen also nur die 1/2-Zeichen vom oberen Rand des Texts subtrahieren und auf dem Bild hinzufügen. Wenn Sie das Bild innerhalb des Strömungs Text platzieren, wird es unabhängig vom Blocktyp arbeiten:

<p>

.left { 
 
    float:left; 
 
    margin-top:.5em; 
 
} 
 
.text { 
 
    line-height:2; 
 
    margin-top:-.5em; 
 
}

<div> 
 
    <p class="text"> 
 
    <img class="left" src="https://placehold.it/60x60"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
</div>

<h1>

.left { 
 
    float:left; 
 
    margin-top:.5em; 
 
} 
 
.text { 
 
    line-height:2; 
 
    margin-top:-.5em; 
 
}

<div> 
 
    <h1 class="text"> 
 
    <img class="left" src="https://placehold.it/60x60"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </h1> 
 
</div>

Quelle

2016-03-29 21:05:25 trex005

Wie entferne ich die Zeilenhöhe vom Anfang des Textes?

Antwort

Verwandte Themen