Linjehøjde - CSS-tricks

Anonim

Den line-heightegenskab definerer mængden af plads over og under inline elementer. Det vil sige elementer, der er indstillet til display: inlineeller display: inline-block. Denne egenskab bruges oftest til at indstille ledelinjen for tekstlinjer.

p ( line-height: 1.5; )

Den line-heightegenskab kan acceptere de søgeord værdier normaleller nonesamt et nummer, længde, eller procent.

Ifølge specifikationen er en værdi på "normal" ikke kun en enkelt konkret værdi, der anvendes på alle elementer, men beregner snarere til en "rimelig" værdi afhængigt af den skriftstørrelse, der er indstillet (eller nedarvet) på elementet.

En længdeværdi kan defineres ved hjælp af en hvilken som helst gyldig CSS-enhed (px, em, rem osv.).

En procentværdi er elementets skriftstørrelse ganget med procenten. For eksempel:

Tjek denne pen!

I demoen ovenfor har de tre afsnit deres liniehøjder indstillet til henholdsvis 150%, 200% og 250%. Kroppselementet har sin skriftstørrelse defineret til 20 pixel. Dette betyder, at de beregnede linjehøjder for afsnit er henholdsvis 30 pixel, 40 pixel og 50 pixel.

Enhedsfri liniehøjde

Den anbefalede metode til at definere liniehøjde er at bruge en talværdi, der betegnes som en "enhedsløs" liniehøjde. En talværdi kan være et hvilket som helst tal, inklusive et decimalbaseret tal, som det bruges i det første kodeeksempel på denne side.

Enhedsfri liniehøjde anbefales på grund af det faktum, at underordnede elementer arver den rå talværdi snarere end den beregnede værdi. Med dette kan underordnede elementer beregne deres linjehøjder baseret på deres beregnede skriftstørrelse i stedet for at arve en vilkårlig værdi fra en forælder, der mere sandsynligt har brug for tilsidesættelse.

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Arbejder Arbejder Arbejder Arbejder Arbejder Arbejder Arbejder

IE6 / 7 vil forkert beregne liniehøjden på udskiftede elementer (f.eks. Formkontroller), der er inline.