Višina črte - CSS-triki

Anonim

line-heightLastnost določa količino prostora nad in pod inline elementov. Se pravi elementi, ki so nastavljeni na display: inlineoz display: inline-block. Ta lastnost se najpogosteje uporablja za nastavitev vodilnega za vrstice besedila.

p ( line-height: 1.5; )

line-heightPremoženje lahko sprejme vrednosti, ključne besede normalali nonekot tudi številka, dolžina, ali odstotek.

V skladu s specifikacijo vrednost "normalno" ni samo ena konkretna vrednost, ki se uporabi za vse elemente, temveč izračuna na "razumno" vrednost, odvisno od velikosti pisave, ki je na elementu nastavljena (ali podedovana).

Vrednost dolžine lahko določite s katero koli veljavno enoto CSS (px, em, rem itd.).

Vrednost v odstotkih je velikost pisave elementa, pomnožena z odstotkom. Na primer:

Oglejte si to pisalo!

V zgornji predstavitvi so višine črt treh odstavkov nastavljene na 150%, 200% in 250%. Velikost pisave elementa telesa je določena na 20 slikovnih pik. To pomeni, da so izračunane višine črt za odstavke 30px, 40px in 50px.

Višine črt brez enot

Priporočena metoda za določanje višine črte je uporaba številčne vrednosti, imenovane višina črte brez enote. Vrednost števila je lahko poljubno število, vključno z decimalno številko, kot je uporabljeno v prvem primeru kode na tej strani.

Višine vrstic brez enot so priporočljive zaradi dejstva, da bodo podrejeni elementi podedovali vrednost surovega števila in ne izračunane vrednosti. S tem lahko podrejeni elementi izračunajo svoje višine vrstic na podlagi izračunane velikosti pisave, namesto da bi podedovali poljubno vrednost od starša, za katerega je bolj verjetno, da ga je treba preglasiti.

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
Deluje Deluje Deluje Deluje Deluje Deluje Deluje

IE6 / 7 bo napačno izračunal višino črte na zamenjanih elementih (npr. Kontrolniki obrazca), ki so v vrstici.