Wie richtige Konsistenz CSS line-height zu erreichen

für font-size und line-height Meine grundlegende CSS-Regel ist ziemlich einfach:Wie richtige Konsistenz CSS line-height zu erreichen

body { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    line-height: 24px; 
}

Wenn ich einen Absatz erstellen, die eine <em> oder eine <strong> enthält (oder sogar einige <code>, die verwendet eine andere font-size als die <body>), stelle ich fest, dass diese Elemente die Zeilenhöhe um ein oder zwei Pixel erhöhen.

Dies führt mich zu der Annahme, dass die meisten Browser nehmen die größte Inline-Element zur Anzeige line-height. Ist das richtig?

Mein Ziel ist es, die line-height konsistent zu machen, unabhängig davon, welche Elemente inline sind.

Der einzige Weg, die ich gefunden habe ist die line-height konsistent machen, um zu definieren:

em, strong, code, etc { 
    line-height: 100%; 
}

Ist dies der richtige Weg, um dies zu? Oder bin ich zu sehr Perfektionist?

Edit 1:

Dies scheint auch zu funktionieren:

em, strong, code, etc { 
    line-height: 1; 
}

Edit 2:

Nach einigen Tagen mit diesem zu spielen, scheint es nicht, dass Es gibt eine zuverlässige Lösung, um eine konsistente line-height zu halten. Wenn irgendjemand Ideen hat, würde ich es lieben, sie zu hören.

bearbeiten 3:

Für meine eigene zukünftige Referenz und aus meiner eigenen Forschung, diese Tags sollten mit line-height: 1 so lange betrachtet werden, da sie inline angezeigt werden, zusammen mit anderem Standardtext:

abbr, acronym, b, big, cite, code, del, dfn, em, i, ins, kbd, q, 
samp, small, strong, sub, sup, tt, var

Diese Elemente sind fragwürdig:

a, bdo, img, span

Quelle

2009-10-12 Jeff

The spec bestätigt, was Sie dachten, dass Browser die größte Schriftart für die line-height Berechnung nehmen. Das bedeutet, dass Ihre einzige Option (und die, die in der Spezifikation erwähnt wird) darin besteht, die Zeilenhöhe für ALLE Inline-Boxen in Zeilen festzulegen, die Ihnen wichtig sind.Sie wären wahrscheinlich nicht glücklich mit den Ergebnissen der Auswahl body * und der Schriftgröße. So fügen Sie einige Divs mit der gleichen Klasse um, was Textblöcke wollen Sie Uniform sehen, und Sie dorthin gehen:

div.uniformlines * { 
    line-height: 100%; 
    font-size: 16px; 
}

Quelle

2009-10-13 17:26:03 WillfulWizard

Tolle Infos! Was ist mit 'p * {Zeilenhöhe: 0; } 'oder besser noch vielleicht' p a, p code, p groß {line-height: 0; } '? Jetzt kommen wir irgendwohin. ';)' – Jeff

Follow-up zu meinem letzten Kommentar. Sei vorsichtig mit meinem Code oben. Wenn Sie zum Beispiel '

foo

' haben, wird die Zeilenhöhe zu Null berechnet, was wahrscheinlich nicht das ist, was Sie wollen. – Jeff

ich denke, dass ein ziemlich n ist Idee essen.

Vergessen Sie jedoch nicht, dass der Text fett/kursiv zu groß ist und die Lesbarkeit dadurch beeinträchtigt werden kann, dass alle Zeilen wirklich groß werden, wenn nur einer benötigt wird. Sie können auch etwas mit hochgestellten und tiefgestellten Zahlen zu tun haben, wenn Ihr Beispiel es nicht schon erledigt.

Quelle

2009-10-12 15:58:17 DisgruntledGoat

Ooooo ja, arbeite an sub und sup jetzt, aber über bereit, aufzugeben. Lol – Jeff

Hmm, kam gerade zurück und ich denke nicht, was ich gepostet habe, ist richtig. Wenn die Zeilenhöhe auf 100% gesetzt wird, wird sie nicht konsistent gehalten - die Zeile mit dem größeren Text ist größer, aber die nachfolgenden Zeilen werden wieder normal angezeigt. Ihr Beispiel für das Festlegen der Zeilenhöhe auf 0 behält alle Zeilen auf ihrer ursprünglichen Höhe - in diesem Fall müssen Sie sicherstellen, dass der größere Text die anderen Zeilen nicht überlappt. – DisgruntledGoat

Ich sehe dieses Verhalten nicht, aber ich verwende WebKit. Tritt das Problem für Sie auf, wenn Sie einige fettgedruckte Tags in dieses Beispiel einfügen?

http://www.w3schools.com/css/tryit.asp?filename=trycss_line-height

Quelle

2009-10-13 10:16:52

Ja, es ist sicher (FF 3.0.x). Ich arbeite jetzt an diesem Problem und es scheint nicht, als gäbe es eine einvernehmliche Lösung. – Jeff

Es scheint, beste und flexibelste body {line-height: 0} zu definieren, dann die Zeilenhöhe definieren für die wichtigsten Inhaltsbereiche mit line-height: 1 oder 1,5 oder was auch immer. Dadurch können Sie die anderen Elemente dynamischer und konsistenter steuern.

Zum Beispiel kann Zeilenhöhe wirklich problematisch für Bilder oder andere Raster sein, die wie ein Galerie-Stil bündig zueinander ausgerichtet werden wollen. Dies ist meistens der Fall, wenn Bilder Anchor-Tags haben, die die Zeilenhöhe des übergeordneten Elements erben. Die Spezifikation erlaubt einen "normalen" Wert, aber das scheint ein anderer Standard pro Browser zu sein. 1 oder 100% sind auch Optionen, aber "0" scheint im Grunde alle Browser zwingen denselben Standard, wie eine gute CSS-Reset. Natürlich wird der gesamte Text in eine Zeile mit "0" gequetscht, deshalb ist es notwendig, die Zeilenhöhe in den Inhaltsbereichen festzulegen.

Here's a codepen I put together to illustrate the point

Quelle

2014-07-18 18:25:54

Dieser Thread ist schon Jahre alt und Dinge könnten in der Zwischenzeit geändert haben, aber die folgende (was ich auf http://webdesignandsuch.com/how-to-fix-sup-sub-line-height-problem-with-css/ wieder entdeckt) funktioniert für mich:

* { 
    vertical-align: bottom; }

Es ist ziemlich überraschend, da vertical-align als solches scheint mit line-height nicht verwandt zu sein; dann wieder, das ist CSS, also weißt du nie. Die oben zitierte Website schlägt tatsächlich

sub { 
    height: 0; 
    line-height: 1; 
    vertical-align: baseline; 
    _vertical-align: bottom; 
    position: relative; }

vor, das für mich wie ein Hack aussieht.

Quelle

2015-01-21 05:12:07 flow

Wie richtige Konsistenz CSS line-height zu erreichen

Antwort

Verwandte Themen