Vonalmagasság - CSS-trükkök

A line-heighttulajdonság meghatározza az inline elemek fölötti és alatti tér nagyságát. Vagyis olyan elemek, amelyekre display: inlinevagy display: inline-block. Ezt a tulajdonságot használják leggyakrabban a szövegsorok elejének beállításához.

p ( line-height: 1.5; )

Az line-heightingatlan el tudja fogadni a kulcsszó értékeinek normalvagy nonevalamint számos, hosszúság vagy százalékban.

A specifikáció szerint a „normál” értéke nem csupán egyetlen konkrét érték, amelyet minden elemre alkalmazunk, hanem egy „ésszerű” értékre számít az elemen beállított (vagy öröklött) betűmérettől függően.

A hosszúsági érték bármely érvényes CSS egységgel megadható (px, em, rem stb.).

A százalékos érték az elem betűmérete szorozva a százalékkal. Például:

Nézze meg ezt a tollat!

A fenti bemutatóban a három bekezdés vonalmagasságát 150% -ra, 200% -ra, illetve 250% -ra állítják be. A törzs elem betűmérete 20 képpontos. Ez azt jelenti, hogy a bekezdések kiszámított vonalmagassága 30px, 40px és 50px.

Egység nélküli vonalmagasságok

Az ajánlott módszer a vonalmagasság meghatározására egy számértéket használ, amelyet „egység nélküli” vonalmagasságnak nevezünk. A szám értéke tetszőleges szám lehet, beleértve a tizedes alapú számot is, amint az ezen az oldalon található első kód példában szerepel.

Az egység nélküli vonalmagasságokat azért ajánljuk, mert a gyermekelemek a nyers számértéket öröklik meg, nem pedig a kiszámított értéket. Ezzel a gyermek elemek kiszámíthatják a betűméretük alapján a magasságukat, nem pedig tetszőleges értéket örökölnek egy szülőtől, amelyre nagyobb valószínűséggel van szükség felülírásra.