Jak osiągnąć właściwą CSS line-height konsystencję

Moja podstawowa reguła CSS dla font-size i line-height jest dość prosta:Jak osiągnąć właściwą CSS line-height konsystencję

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

Kiedy tworzę paragraf, który zawiera <em> lub <strong> (lub nawet kilka <code> który wykorzystuje inny font-size niż <body>), zauważam, że te elementy zwiększają wysokość linii o piksel lub dwa.

To prowadzi mnie do przekonania, że większość przeglądarek przyjmuje największy element do wyświetlania line-height. Czy to prawda?

Moim celem jest sprawienie, aby line-height stał się spójny, niezależnie od tego, które elementy są wbudowane.

Jedynym sposobem znalazłem aby line-height zgodny jest określenie:

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

Czy to dobry sposób, żeby iść na ten temat? Czy jestem zbyt wielkim perfekcjonistą?

Edit 1:

To również wydaje się działać:

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

Edycja 2:

Po zagraniu z tym przez kilka dni, to nie wydaje się, istnieje niezawodne rozwiązanie pozwalające zachować spójność line-height. Jeśli ktoś ma jakieś pomysły, z pewnością chciałbym je usłyszeć.

Edit 3:

Ze swej przyszłości i od moich własnych badań, te znaczniki powinny być traktowane z line-height: 1 tak długo, jak są one wyświetlane inline wraz z innym standardowym tekście:

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

te elementy są wątpliwe:

a, bdo, img, span

Źródło

2009-10-12 Jeff

The spec potwierdza to, co myślałeś, że przeglądarka ma największą czcionką obliczania line-height. Oznacza to, że jedyną opcją (i tą, o której mowa w specyfikacji) jest ustawienie wysokości linii dla WSZYSTKICH pól śródliniowych w liniach, które są dla Ciebie ważne.Prawdopodobnie nie byłbyś zadowolony z wyników wyboru body * i ustawienia rozmiaru czcionki. Więc dodać kilka div z tej samej klasy wokół cokolwiek bloki tekstu chcesz wyglądać mundurek, a nie idziesz:

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

Źródło

2009-10-13 17:26:03 WillfulWizard

Świetne informacje! A co z 'p * {line-height: 0; } ', lub jeszcze lepiej, może' p a, kod p, p duży {line-height: 0; } '? Teraz dokądś zmierzamy. ';)' – Jeff

Powtórzenie mojego ostatniego komentarza. Uważaj na mój kod powyżej. Jeśli masz na przykład "

foo

', wysokość linii obliczy zero, co prawdopodobnie nie jest tym, czego potrzebujesz. – Jeff

myślę, że to całkiem n jeść pomysł.

Nie zapominaj jednak, że jeśli tekst pogrubiony/pochylony jest zbyt duży, może to pogorszyć czytelność, powodując, że wszystkie linie będą naprawdę wysokie, gdy zajdzie taka potrzeba. Możesz również chcieć czegoś do czynienia z indeksem górnym i dolnym, jeśli twój przykład go nie zajmuje.

Źródło

2009-10-12 15:58:17 DisgruntledGoat

Ooooo tak, pracując teraz nad sub i sup, ale o gotowości do poddania się. Lol – Jeff

Hmm, właśnie wróciłem do tego i nie sądzę, że to, co napisałem, jest słuszne. Ustawienie wysokości linii na 100% nie zapewnia spójności - linia z większym tekstem jest większa, ale kolejne linie wracają do normalności. Twój przykład ustawienia wysokości linii na 0 powoduje, że wszystkie linie są ustawione na swojej pierwotnej wysokości - w takim przypadku upewnij się, że większy tekst nie pokrywa się z pozostałymi liniami. – DisgruntledGoat

Nie widzę tego zachowania, ale używam WebKit. Czy problem występuje, jeśli wrzucisz do tego przykładu pogrubione znaczniki?

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

Źródło

2009-10-13 10:16:52

Tak, na pewno (FF 3.0.x). Pracuję nad tym problemem teraz i nie wydaje mi się, że istnieje polubowne rozwiązanie. – Jeff

Wydaje najlepsze i najbardziej elastyczne, aby określić body {line-height: 0} następnie zdefiniować line-height dla głównych obszarów treści z line-height: 1 lub 1.5 lub cokolwiek innego. To pozwala kontrolować inne elementy bardziej dynamicznie i konsekwentnie.

Na przykład wysokość linii może być bardzo problematyczna w przypadku obrazów lub innych siatek, które mają być wyrównane względem siebie, np. W stylu galerii. Najczęściej dzieje się tak, gdy obrazy mają znaczniki zakotwiczenia, które dziedziczą wysokość linii swojego obiektu nadrzędnego. Specyfikacja dopuszcza "normalną" wartość, ale wydaje się, że jest to inny standard dla każdej przeglądarki. 1 lub 100% to również opcje, ale "0" wydaje się zasadniczo sprawić, że wszystkie przeglądarki wymuszają ten sam standard, jak na przykład dobry reset CSS. Oczywiście cały tekst zostaje zgnieciony do jednej linii z "0", dlatego ustawienie wysokości linii w obszarach zawartości jest konieczne.

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

Źródło

2014-07-18 18:25:54

Ten wątek jest już lat i rzeczy mogą się zmieniło w międzyczasie, ale po (co odnaleziony na http://webdesignandsuch.com/how-to-fix-sup-sub-line-height-problem-with-css/) działa dla mnie:

* { 
    vertical-align: bottom; }

Jest to dość zaskakujące, ponieważ vertical-align jako taki wydaje się niezwiązany z line-height; to znowu jest CSS, więc nigdy nie wiadomo. Strona cytowana powyżej w rzeczywistości sugeruje, że

który wygląda jak włamanie do mnie.

Źródło

2015-01-21 05:12:07 flow

Jak osiągnąć właściwą CSS line-height konsystencję

Odpowiedz

Powiązane problemy