Line Height – Odstęp Wiersze CSS

Odstęp Między Wierszami CSS

line-height

Własność line-height (ang. wysokość linii, interlinia) pozwala nam regulować odstępy pomiędzy liniami tekstu, tzw. interlinia, znana Wam pewnie z procesorów tekstowych (np. Word). Może pamiętacie jak często ustawiało się interlinię na poziomie półtorej wiersza, żeby tekst ładniej wyglądał. Przy pomocy tej własności możemy właśnie tego dokonać. Przyjmuje ona wartości

numeryczne 1.2
długości(px) 12px
długości(em) 1.2em
długości(pt) 12pt
procentowe 120%

line-height: 1.2;
line-height: 12px;
line-height: 1.2em;
line-height: 12pt;
line-height: 120%;

Wszystkie powyższe zapisy generują jednakową wysokość interlinii. Dobrą praktyką jest używanie wartości numerycznych, a nie jednostek z tego względu, że mają one podejście relatywne i łatwiej przewidzieć ich zachowanie.

p.one {
  font-size: 15px;
  line-height: 1.5
  width: 100px;
}
p.two {
font-size: 15px;
line-height: 1.5em;
width: 100px;
}
<p class="one">Paragraf z interlinią wyrażoną relatywnie.</p>
<p class="two">Paragraf z interlinią wyrażoną w jednostkach.</p>