Xüsusiyyət line-height

Xüsusiyyət line-height mətn sətirləri arasındakı intervalı (sətirlər arası intervalı) təyin edir.

Xüsusiyyət, görünə biləcəyi kimi, mətn sətirləri arasında boşluq təyin etmir, o, mətn xəttinin hündürlüyünü təyin edir. Bu o deməkdir ki, sətirlər arasındakı faktiki boşluq belə hesablanacaq: line-height - font-size = mətn sətirləri arasındakı məsafə. Və ya əksinə line-height = font-size + sətirlər arasındakı məsafə.

Sintaksis

cssselektor {
  line-height: qiymet;
}

Qiymətlər

Xüsusiyyətin qiyməti kimi istənilən ölçü vahidləri istifadə edilə bilər. % ilə qiymət göstərildikdə, sətirlər arası interval yazı ölçüsünün faizi ilə olacaq.

Bundan əlavə, sıfırdan böyük istənilən ədəd qiymət kimi təyin edilə bilər. Bu halda, o, yazı ölçüsünün vurulan ədədi kimi qəbul edilir. Məsələn, əgər font-size 20px qiymətinə malikdirsə, line-height isə - 1.5, onda bu, line-height: 30px yazmaqla eynidır (20px * 1.5 = 30px).

Xüsusiyyət standart olaraq normal qiymətinə malikdir, bu halda brauzer sətirlər arası intervalı avtomatik seçir.

Nümunə

Bu nümunədə mətn sətirləri arasındakı məsafə line-height - font-size = 38px - 18px = 20px olacaq:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 35px;
  text-align: justify;
}

Результат:

Nümunə

Boşluğu 25px - 18px = 7px-ə qədər azaldaq:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 25px;
  text-align: justify;
}

Результат:

Nümunə

Bu nümunədə mətn sətirləri arasındakı məsafə line-height - font-size = 18px - 18px = 0px - sətirlər praktiki olaraq bir-birinə yapışacaq (yuxarı sətirin hərflərinin quyruqları aşağı sətirin hərflərinin quyruqlarına toxunacaq):

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 18px;
  text-align: justify;
}

Результат:

Nümunə

Bu nümunədə line-height qiyməti - yazı ölçüsünün 1.5 vuran ədədidır. Nəticədə line-height font-size * 1.5 = 18px * 1.5 = 27px-ə ekvivalent olacaq. Və sətirlər arasındakı faktiki boşluq isə line-height - font-size = 27px - 18px = 9px olacaq:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;
}

Результат:

Nümunə

Vuran ədədi artıraq:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 2.5;
  text-align: justify;
}

Результат:

Nümunə

Əgər line-height-i font-size-dən kiçik etsək, onda sətirlər üst-üstə düşəcək:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 13px;
  text-align: justify;
}

Результат: