Sorköz

Line-height tulajdonság

A line-height tulajdonság blokkszintű elemeknél a sorok minimális magasságát, vagyis a sorközt határozza meg. Sorszintű elem esetén az elem dobozának pontos magasságát adja meg. Értékei lehetnek:

Érték Leírás
normal: a betűkészlet alapértelmezett sormagassága
(szám): a sortáv aránya a betűmérethez viszonyítva
(hossz): a sormagasság konkrét értékének megadása px, pt, cm, stb
(százalék): a sortáv aránya a betűméret százalékában

Példa 1 - Normál sormagasság

A forráskód részlet:

<p style="line-height: normal;">A szöveg sorai közötti távolság beállítására látunk négy példát. Az első példában az alapértelmezett normál sortávolság figyelhető meg. A második példában számmal adjuk meg a normál sortáv hányszorosára álítjuk be (Vigyázz, tizedespont van nem vessző!), jelen esetben ez az érték 1.5 lesz. A harmadik példában pontos értéket állíthatunk be mértékegységek használatával. Ilyenek pl.: mm, cm, pt, em ... Most az fogjuk megmondani, hogy a sortávolság a betűmérethet viszonyítva legyen másfélszeres: 1.5em megadásával. Az utolsó példában pedig a százalékos formára látunk mintát, itt 150%-ot adunk értéknek.</p>

Az eredmény:

A szöveg sorai közötti távolság beállítására látunk négy példát. Az első példában az alapértelmezett normál sortávolság figyelhető meg. A második példában számmal adjuk meg a normál sortáv hányszorosára álítjuk be (Vigyázz, tizedespont van nem vessző!), jelen esetben ez az érték 1.5 lesz. A harmadik példában pontos értéket állíthatunk be mértékegységek használatával. Ilyenek pl.: mm, cm, pt, em ... Most az fogjuk megmondani, hogy a sortávolság a betűmérethet viszonyítva legyen másfélszeres: 1.5em megadásával. Az utolsó példában pedig a százalékos formára látunk mintát, itt 150%-ot adunk értéknek.


Példa 2 - Sormagasság viszonyszámmal megadva

A forráskód részlet:

<p style="line-height: 1.5;">A szöveg sorai közötti távolság beállítására látunk négy példát. Az első példában az alapértelmezett normál sortávolság figyelhető meg. A második példában számmal adjuk meg a normál sortáv hányszorosára álítjuk be (Vigyázz, tizedespont van nem vessző!), jelen esetben ez az érték 1.5 lesz. A harmadik példában pontos értéket állíthatunk be mértékegységek használatával. Ilyenek pl.: mm, cm, pt, em ... Most az fogjuk megmondani, hogy a sortávolság a betűmérethet viszonyítva legyen másfélszeres: 1.5em megadásával. Az utolsó példában pedig a százalékos formára látunk mintát, itt 150%-ot adunk értéknek.</p>

Az eredmény:

A szöveg sorai közötti távolság beállítására látunk négy példát. Az első példában az alapértelmezett normál sortávolság figyelhető meg. A második példában számmal adjuk meg a normál sortáv hányszorosára álítjuk be (Vigyázz, tizedespont van nem vessző!), jelen esetben ez az érték 1.5 lesz. A harmadik példában pontos értéket állíthatunk be mértékegységek használatával. Ilyenek pl.: mm, cm, pt, em ... Most az fogjuk megmondani, hogy a sortávolság a betűmérethet viszonyítva legyen másfélszeres: 1.5em megadásával. Az utolsó példában pedig a százalékos formára látunk mintát, itt 150%-ot adunk értéknek.


Példa 3 - Pontos sormagasság megadás mértékegységgel

A forráskód részlet:

<p style="line-height: 1.5em;">A szöveg sorai közötti távolság beállítására látunk négy példát. Az első példában az alapértelmezett normál sortávolság figyelhető meg. A második példában számmal adjuk meg a normál sortáv hányszorosára álítjuk be (Vigyázz, tizedespont van nem vessző!), jelen esetben ez az érték 1.5 lesz. A harmadik példában pontos értéket állíthatunk be mértékegységek használatával. Ilyenek pl.: mm, cm, pt, em ... Most az fogjuk megmondani, hogy a sortávolság a betűmérethet viszonyítva legyen másfélszeres: 1.5em megadásával. Az utolsó példában pedig a százalékos formára látunk mintát, itt 150%-ot adunk értéknek.</p>

Az eredmény:

A szöveg sorai közötti távolság beállítására látunk négy példát. Az első példában az alapértelmezett normál sortávolság figyelhető meg. A második példában számmal adjuk meg a normál sortáv hányszorosára álítjuk be (Vigyázz, tizedespont van nem vessző!), jelen esetben ez az érték 1.5 lesz. A harmadik példában pontos értéket állíthatunk be mértékegységek használatával. Ilyenek pl.: mm, cm, pt, em ... Most az fogjuk megmondani, hogy a sortávolság a betűmérethet viszonyítva legyen másfélszeres: 1.5em megadásával. Az utolsó példában pedig a százalékos formára látunk mintát, itt 150%-ot adunk értéknek.


Példa 4 - Sormagasság megadása százalékkal

A forráskód részlet:

<p style="line-height: 150%;">A szöveg sorai közötti távolság beállítására látunk négy példát. Az első példában az alapértelmezett normál sortávolság figyelhető meg. A második példában számmal adjuk meg a normál sortáv hányszorosára álítjuk be (Vigyázz, tizedespont van nem vessző!), jelen esetben ez az érték 1.5 lesz. A harmadik példában pontos értéket állíthatunk be mértékegységek használatával. Ilyenek pl.: mm, cm, pt, em ... Most az fogjuk megmondani, hogy a sortávolság a betűmérethet viszonyítva legyen másfélszeres: 1.5em megadásával. Az utolsó példában pedig a százalékos formára látunk mintát, itt 150%-ot adunk értéknek.</p>

Az eredmény:

A szöveg sorai közötti távolság beállítására látunk négy példát. Az első példában az alapértelmezett normál sortávolság figyelhető meg. A második példában számmal adjuk meg a normál sortáv hányszorosára álítjuk be (Vigyázz, tizedespont van nem vessző!), jelen esetben ez az érték 1.5 lesz. A harmadik példában pontos értéket állíthatunk be mértékegységek használatával. Ilyenek pl.: mm, cm, pt, em ... Most az fogjuk megmondani, hogy a sortávolság a betűmérethet viszonyítva legyen másfélszeres: 1.5em megadásával. Az utolsó példában pedig a százalékos formára látunk mintát, itt 150%-ot adunk értéknek.


Ha jól megfigyeljk az utolsó három példát, akkor azt vehetjük észre, hogy ugyanazt a sormagasságot eredményezik:
p {line-height: 1.5;}
p {line-height: 1.5em;}
p {line-height: 150%;}

A helyes sortávolság a betűméret 110–120%-a. A böngészők általában automatikusan az utóbbi értéket használják, így ettől csak akkor térjünk el, ha valamilyen célunk van vele.

ugrás a lap tetejére