Skip to main content

CSS Line Spacing och Style Property

CSS Height vs Line-Height (Maj 2025)

CSS Height vs Line-Height (Maj 2025)
Anonim

Lär dig hur du använder linjens höjd för CSS-stilens egenskap för att påverka din linjeavstånd på dina webbsidor.

Värden av CSS-linjeavstånd

CSS-linjeavstånd påverkas av CSS-stilens höjdhöjd. Den här egenskapen tar upp till 5 olika värden:

  • Vanligt: webbläsaren bestämmer ett värde för linjeavståndet som är relaterat till teckensnittstorleken. Detta är vanligen detsamma som teckensnittstorleken eller något större (som 20%).
  • Ärva: linjeavståndet bör tas från moderelementets linjeavstånd. Så om du anger linjehöjden på din kroppslabel till 30% större än teckenstorleken och stycketiketterna som är inställda att ärva, kommer de också att ha en linjehöjd på 30% större än teckenstorleken.
  • Ett nummer: Om linjens höjdvärde inte har någon måttenhet anses den vara en multiplikator på teckenstorleken för linjens höjd. Så en linjehöjd på 1,25 skulle vara 25% större än teckenstorleken.
  • En längd: Om linjens höjdvärde har en måttenhet, det vill säga den exakta mängden utrymme bör det finnas mellan linjerna. Så, 1,25 mm skulle resultera i linjer 1,25 millimeter ifrån varandra.
  • En procentsats: Om linjens höjd är en procentandel, skulle det vara en procentandel av teckensnittstorleken. Så en linjehöjd på 125% skulle vara 25% större än teckenstorleken.

Vilket värde ska du använda för CSS-linjeavstånd

I de flesta fall är det bästa valet för linjeavstånd att lämna det vid standard eller "normal". Detta är i allmänhet läsbar och kräver inte att du gör något speciellt. Men byte av linjeavstånd kan ge din text en annan känsla för det.

Om din teckenstorlek definieras som ems eller procentsatser, bör din linjehöjd också definieras så. Detta är den mest flexibla formen av linjeavstånd eftersom det tillåter läsaren att ändra storlek på sina teckensnitt och håller samma förhållande på ditt linjemått.

Ställ in linjehöjd för utskriftsformatark med ett punkt (pt) -värde. Poängen är en utskriftsåtgärd, och så måste dina teckenstorlekar vara i poäng också.

Vi tycker inte om att använda nummervalet eftersom vi har funnit att det är mest förvirrande för människor. Många tror att siffran är en absolut storlek, och så gör de det enorma. Du kan till exempel ha ett teckensnitt på 14px och sedan ställer du in din linjhöjd till 14 vilket resulterar i stora luckor mellan linjerna eftersom linjens avstånd är inställt på 14 gånger teckensnittstorleken.

Hur mycket utrymme ska du använda för din linjeutrymme

Som nämnts ovan rekommenderar vi att du använder standardlinjens avstånd om du inte har en specifik anledning att ändra den. Ändring av linjeavståndet kan ha olika effekter:

  • Text som är mycket tätt ihop kan vara svår att läsa. Men små linjer kan påverka stämningen i texten. Om texten stryks ihop kan det göra att texten i texten verkar mörkare eller tätare.
  • Text som är längre ifrån varandra kan också vara svår att läsa. Men breda mellanslag gör texten mer flytande och flytande.
  • Om du ändrar linjeavståndet kan text som annars inte passar i ett utrymme vara mer kompakt eller ta mer utrymme i dina mönster.