Linijos aukštis - CSS-gudrybės

Anonim

line-heightNuosavybė apibrėžia, kiek vietos viršuje ir apačioje inline elementų. Tai yra elementai, kurie yra nustatyti display: inlinearba display: inline-block. Ši savybė dažniausiai naudojama norint nustatyti teksto eilučių priekį.

p ( line-height: 1.5; )

line-heightTurtas gali priimti raktažodžių vertybes normalar nonetaip pat skaičių, ilgį, arba procentais.

Remiantis specifikacija, „normalaus“ reikšmė nėra tik viena konkreti reikšmė, taikoma visiems elementams, o apskaičiuojama į „pagrįstą“ vertę, atsižvelgiant į elementui nustatytą (arba paveldėtą) šrifto dydį.

Ilgio reikšmę galima apibrėžti naudojant bet kurį galiojantį CSS vienetą (px, em, rem ir kt.).

Procentinė vertė yra elemento šrifto dydis, padaugintas iš procento. Pavyzdžiui:

Patikrinkite šį rašiklį!

Aukščiau pateiktoje demonstracijoje trijų pastraipų linijos aukštis nustatytas atitinkamai 150%, 200% ir 250%. Turinio elemento šrifto dydis nustatytas 20 taškų. Tai reiškia, kad pastraipoms apskaičiuotas eilutės aukštis yra atitinkamai 30px, 40px ir 50px.

„Unitless Line“ aukštis

Rekomenduojamas linijos aukščio nustatymo metodas yra skaičiaus vertės, vadinamos „be vieneto“ linijos aukščio, naudojimas. Skaičio vertė gali būti bet koks skaičius, įskaitant skaičių po kablelio, kaip nurodyta pirmajame kodo pavyzdyje šiame puslapyje.

Vienetinių linijų aukštis rekomenduojamas dėl to, kad antriniai elementai paveldės neapdoroto skaičiaus vertę, o ne apskaičiuotą vertę. Tai atlikę vaikai elementai gali apskaičiuoti savo eilučių aukštį, atsižvelgdami į apskaičiuotą šrifto dydį, o ne paveldėti savavališką vertę iš tėvų, kurią greičiausiai reikia pakeisti.

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Veikia Veikia Veikia Veikia Veikia Veikia Veikia

IE6 / 7 neteisingai apskaičiuos linijos aukštį ant pakeistų elementų (pvz., Formos valdiklių), kurie yra tiesūs.