Razmik med vrsticami CSS: rešitve
Pogosto imajo začetniki oblikovalce težave pri obvladovanju kaskadnih slogov (CSS). Z nobeno izjemo ne delamo razmik med vrsticami v CSS. Razmik med vrsticami je razdalja med vrsticami navpično. Kot v običajnem dokumentu Microsoft Word, lahko ta parameter spremenite tudi v besedilu datoteke html.
Pri spreminjanju razmika uporabite višino črte
Prva in najbolj pravilna rešitev problema v intervalih bi bila nastavitev vrednosti za lastnost line-height. Privzeto je vrednost te lastnosti normalna (line-height: normal;). Razmik med vrsticami samodejno izračuna spletni brskalnik in je odvisen zlasti od vrste pisave in njene velikosti. Vse pozitivne številske vrednosti, ki bodo nastavljene v lastnostih sloga višine, bo brskalnik zaznal kot število, s katerim je treba pomnožiti velikost trenutne pisave.
V CSS je lahko razmik med vrsticami podan v različnih enotah dolžine: točke (pt), palci (in), piksli (px) in odstotki (%). Odstotek se izračuna glede na trenutno pisavo in privzeto je njegova vrednost 100%. Ne pozabite, da lastnost line-height sposodi vrednost premoženja inherit iz svojega nadrejenega elementa.
Tukaj je nekaj primerov, kako povečati razmik med vrsticami v CSS:
.
Proces dela z razmikom med vrsticami je dokaj preprost. Morali bi imeti osnovno znanje o CSS in sposobnost, da povežete datoteko z glavno html stranjo. Slogi lahko nastavite tudi neposredno na strani html:
Če želite narediti polovični interval v tem stavku, morate v datoteko CSS dodati naslednjo kodo:
p.stroka {
višina črte: 1,5;
}
Če želite narediti dvojni interval, lahko napišete naslednjo kodo:
p.stroka {
višina linije: 2;
}
ali
p.stroka {
višina linije: 200%;
}
V obeh primerih bo brskalnik razumel, da morate pomnožiti trenutno pisavo z 2. Ta vrednost bo razmik med vrsticami.
Zdaj vam ponujamo primer, kako zmanjšati razmik vrstic (CSS):
Pomembno je vedeti, da se negativna vrednost višine vrstice preprosto ne zazna, zato je njena minimalna vrednost lahko 0. Če želite dobiti polovični interval, morate zapisati naslednjo kodo:
p.line {
višina: 0,5;
}
ali
p.line {
višina linije: 50%;
}
ali
p.line {
višina linije: 2;
}
ali
p.line {
line-height: 0.5pt;
}
Vse tri možnosti so pravilne in v skladu z vsemi standardi W3C oziroma bodo delovale v kateri koli različici brskalnika.
Pri menjavi razmika uporabite oblazinjenje
Vendar pa poleg spreminjanja lastnosti višine vrstice obstaja še en način za spremembo razmika med vrsticami v CSS-u, to bo "igra" z vrednostmi lastnosti oblazinjenja. Lastnost sloga oblazinjenja je odgovorna za zamik v katerem koli predmetu html. Privzeto je ta lastnost 0. Če izberete različne vrednosti, lahko spremenite razmik med vrsticami, na primer:
.
Delo z razmikom vrstic je enostavno. Dovolj je poznati osnove CSS-ja in povezati datoteko z glavno html stranjo. Prav tako ga lahko nastavite neposredno na strani z razširitvijo html.
Če želite povečati razmik med vrsticami, povečajte vrednost lastnosti:
p.
oblazinjenje: 10px;
}
Razdalja med vrsticami v našem odstavku se tako poveča za 10 pik glede na začetno. Z enakim uspehom je mogoče zmanjšati razmik med vrsticami, na primer predpisati:
p.
oblazinjenje: 0px;
}
Negativni razmik med vrsticami
Če opazite, tudi ni dovoljeno vnašati negativnih vrednosti, tako da se strune ne prekrivajo. V CSS razmik med vrsticami ne sme biti negativen. V smislu spoštovanja pravil pisanja kode in W3C standardov nikoli ne morete zapisati negativnih vrednosti v vrednostih razmika med vrsticami.
Sprememba razmika med vrsticami v seznamih
Včasih obstaja naloga, da spremenite razmik med vrsticami na seznamih.
- in
- . Prejšnje metode ne bodo vodile do želenega rezultata, vendar obstaja ena lastnost, ki lahko spremeni interval v seznamu - ta lastnost je rob. Lastnost sloga je lahko pozitivna ali negativna. Pokažimo spremembo razmika vrstic na seznamu z zgledom:
Če želite povečati zamik, morate v datoteko CSS zapisati naslednje vrstice:
ul li {
margin-top: 10px;
}
Tako smo pokazali, da se razdalja od vsakega elementa seznama poveča za 10 pik. In v tem primeru je mogoče in negativno vrednost. Tako lahko nastavimo: - margin-top: -15px.