Line-height hassa

line-height hassasy tekst setirleriň arasyndaky aralygy (setirara aralygy) belgileyär.

Hassa, görünýän ýaly, tekst setirleriň arasyndaky aralygy däl, eýsem tekst setiriniň beýikligini belgileyär. Bu şuny aňladýar: setirleriň arasyndaky hakyky aralyk şeýle hasaplanar: line-height - font-size = tekst setirleriň arasyndaky aralyk. Ýa-da tersine line-height = font-size + setirleriň arasydaky aralyk.

Sintaksis

cssselektor {
  line-height: baha;
}

Bahalar

Hassanyň bahasy hökmünde ölçeg birlikleriniň isiňlisinden biri bolup biler. Bahany % görnüşinde görkezende, setirara aralyk şrift ölçeginiň göteriminde bolup görkeziler.

Şeýle hem, noldan uly bolan islendik san baha hökmünde berlip bilner. Bu ýagdaýda ol şrift ölçeginiň köpeldijisi hökmünde kabul ediler. Mysal üçin, eger font-size bahasy 20px bolsa, line-height bolsa 1.5 bolsa, bu line-height: 30px ýazmak bilen deňdir (20px * 1.5 = 30px).

Bellige görä hassanyň bahasy normal, bu ýagdahlýk setirara aralygy awtomatik saýlaýar.

Mysal

Bu mysalda tekst setirleriň arasyndaky aralyk line-height - font-size = 38px - 18px = 20px bolar:

html<p>
  some long text
</p>

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

Результат:

Mysal

Aralygy 25px - 18px = 7px⁅/u ̆⁆ çenli kiçeldeliň:

html<p>
  some long text
</p>

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

Результат:

Mysal

Bu mysalda tekst setirleriň arasyndaky aralyk line-height - font-size = 18px - 18px = 0px bolar - setirler dürli derejede ýapşyp galar (ýokarky setirdäki harp goşlarynyň aşaky setirdäki harp goşlaryna degmegi mümkin):

html<p>
  some long text
</p>

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

Результат:

Mysal

Bu mysalda line-height bahasy - şrift ölçeginiň 1.5 köpeldijisi. Netijede line-height bahasy font-size * 1.5 = 18px * 1.5 = 27px deň bolar. Setirleriň arasyndaky hakyky aralyk bolsa line-height - font-size = 27px - 18px = 9px bolar:

html<p>
  some long text
</p>

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

Результат:

Mysal

Köpeldijini ulyrak edeliň:

html<p>
  some long text
</p>

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

Результат:

Mysal

Eger line-height⁅/c ⁆ bahasyny font-size bahasydan kiçi etsek, setirler bir-biriniň üstüne ýatyp biler:

html<p>
  some long text
</p>

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

Результат: