Sifa line-height

Sifa line-height inaweka mwanya kati ya mistari ya maandishi (mwanya kati ya mistari).

Sifa haii mwanya kati ya mistari ya maandishi, kama inavyoweza kuonekana, inaweka urefu wa mstari wa maandishi. Hii inamaanisha kuwa mwanya halisi kati ya mistari utahesabiwa kama hivi: line-height - font-size = umbali kati ya mistari ya maandishi. Au kinyume chake line-height = font-size + umbali kati ya mistari ya maandishi.

Ki sintaksia

csskichagua {
  line-height: thamani;
}

Thamani

Thamani ya sifa hutumika kama vipimo vyovyote vya ukubwa. Unapoainisha thamani kwa % mwanya kati ya mistari utakuwa kwa asilimia ya ukubwa wa herufi.

Zaidi ya hayo, unaweza kuweka thamani nambari yoyote kubwa kuliko sifuri. Katika kesi hii inachukuliwa kama kizidishi cha ukubwa wa herufi. Kwa mfano, kama font-size ina thamani 20px, na line-height - 1.5, basi hii ni sawa na kuandika line-height: 30px (20px * 1.5 = 30px).

Kwa chaguo-msingi sifa ina thamani normal, katika kesi hii kivinjari huchagua mwanya kati ya mistari ki otomatiki.

Mfano

Katika mfano huu umbali kati ya mistari ya maandishi utakuwa line-height - font-size = 38px - 18px = 20px:

html<p>
  some long text
</p>

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

Результат:

Mfano

Tupunguze mwanya hadi 25px - 18px = 7px:

html<p>
  some long text
</p>

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

Результат:

Mfano

Katika mfano huu umbali kati ya mistari ya maandishi utakuwa line-height - font-size = 18px - 18px = 0px - mistari itaunganisha karibu (vipimo vya herufi za mstari wa juu vitagusa vipimo vya herufi za mstari wa chini):

html<p>
  some long text
</p>

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

Результат:

Mfano

Katika mfano huu thamani line-height - kizidishi 1.5 cha ukubwa wa herufi. Kwa hivyo line-height itakuwa sawa na font-size * 1.5 = 18px * 1.5 = 27px. Na mwanya halisi kati ya mistari utakuwa line-height - font-size = 27px - 18px = 9px:

html<p>
  some long text
</p>

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

Результат:

Mfano

Tuzidishe kizidishi:

html<p>
  some long text
</p>

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

Результат:

Mfano

Kama ukifanya line-height iwe ndogo kuliko font-size, basi mistari itaingiliana kabisa:

html<p>
  some long text
</p>

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

Результат: