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
kichagua {
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:
<p>
some long text
</p>
p {
font-size: 18px;
line-height: 35px;
text-align: justify;
}
:
Mfano
Tupunguze mwanya hadi 25px - 18px
= 7px:
<p>
some long text
</p>
p {
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):
<p>
some long text
</p>
p {
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:
<p>
some long text
</p>
p {
font-size: 18px;
line-height: 1.5;
text-align: justify;
}
:
Mfano
Tuzidishe kizidishi:
<p>
some long text
</p>
p {
font-size: 18px;
line-height: 2.5;
text-align: justify;
}
:
Mfano
Kama ukifanya line-height iwe ndogo kuliko font-size,
basi mistari itaingiliana kabisa:
<p>
some long text
</p>
p {
font-size: 18px;
line-height: 13px;
text-align: justify;
}
: