CSS razmak između redova: rješenja
Vrlo često, početnički dizajneri imaju problema u ovladavanju kaskadnim stilskim listovima (CSS). Nema iznimke u radu prored u CSS-u. Razmak između redova je udaljenost između redova okomito. Kao iu običnom Microsoft Word dokumentu, ovaj se parametar može promijeniti u tekstu html datoteke.
Za promjenu razmaka koristite visinu linije
Prvo i najprikladnije rješenje problema u intervalima bilo bi postaviti vrijednost svojstva visine retka. Prema zadanim je postavkama vrijednost ovog svojstva normalna (line-height: normal;). Razmak između redaka izračunava automatski sam Internet preglednik i ovisi, posebno, o vrsti fonta, kao io njegovoj veličini. Bilo koja pozitivna brojčana vrijednost koja će se postaviti u svojstvo stila visine retka preglednik će percipirati kao broj kojim se mora pomnožiti veličina trenutnog fonta.
U CSS-u, prored se može odrediti u različitim jedinicama duljine: točke (pt), inča (in), piksela (px) i postotaka (%). Postotak se izračunava u odnosu na trenutni font, a zadana vrijednost je 100%. Ne zaboravite da je svojstvo line-height posudilo vrijednost svojstva inherit iz svog nadređenog elementa.
Evo nekoliko primjera kako povećati prored u CSS-u:
,
Proces rada s proredom je vrlo jednostavan. Trebali biste imati osnovno znanje o CSS-u i mogućnost spajanja datoteke na glavnu html stranicu. Stilove možete postaviti i izravno na html stranici:
Da biste u ovoj rečenici napravili polovicu intervala, morate dodati sljedeći kôd u CSS datoteku:
p.stroka {
visina linije: 1,5;
}
Da biste napravili dvostruki interval, možete napisati sljedeći kôd:
p.stroka {
visina linije: 2;
}
ili
p.stroka {
visina linije: 200%;
}
U oba slučaja preglednik će shvatiti da morate pomnožiti trenutni font s 2. Ova vrijednost će biti prored.
Sada ćemo dati primjer kako smanjiti prored (CSS):
Važno je zapamtiti da se negativna vrijednost visine retka jednostavno ne opaža, tako da njezina minimalna vrijednost može biti 0. Da biste dobili pola intervala, morate napisati sljedeći kod:
p.line {
visina linije: 0,5;
}
ili
p.line {
visina linije: 50%;
}
ili
p.line {
visina linije: 2;
}
ili
p.line {
line-height: 0.5pt;
}
Sve tri opcije su točne i u skladu sa svim W3C standardima, odnosno, radit će u bilo kojoj verziji preglednika.
Kod mijenjanja razmaka koristite obloge
Međutim, osim promjene svojstva line-height, postoji još jedan način da se promijeni prored u CSS-u, to će biti "igra" s vrijednostima svojstva padding. Svojstvo stila paddinga je odgovorno za uvlačenje u bilo kojem html objektu. Prema zadanim postavkama ovo svojstvo je 0. Odabirom različitih vrijednosti možete promijeniti razmak između redaka, na primjer:
,
Rad s razmakom između redaka je jednostavan. Dovoljno je poznavati osnove CSS-a i moći spojiti datoteku na glavnu html stranicu. Također ga možete postaviti izravno na stranicu s HTML nastavkom.
Da biste povećali prored, povećajte vrijednost svojstva:
p.second {
obloga: 10px;
}
Stoga će udaljenost između redova u našem paragrafu biti povećana za 10 piksela u odnosu na početni. S istim uspjehom moguće je smanjiti razmak linija, propisujući na primjer:
p.second {
padding: 0px;
}
Negativni prored
Ako primijetite, također nije dopušteno unositi negativne vrijednosti tako da se nizovi ne preklapaju. U CSS-u prored ne može biti negativan. Što se tiče pridržavanja pravila pisanja koda i W3C standarda, nikada ne možete pisati negativne vrijednosti u vrijednostima razmaka između redova.
Promjena razmaka redaka u popisima
Ponekad postoji zadatak da promijenite prored u popisu.
- i
- , Prethodne metode neće dovesti do željenog rezultata, ali postoji jedna osobina koja može promijeniti interval u popisu - ovo svojstvo je margina. Ovo svojstvo stila može biti pozitivno ili negativno. Pokažimo promjenu u proredu u popisu na primjer:
Da biste povećali uvlačenje, morate unijeti sljedeće retke u CSS datoteku:
ul li {
margina-gore: 10px;
}
Tako smo naznačili da se udaljenost od svake stavke popisa povećava za 10 piksela. I u ovom slučaju moguće je i negativna vrijednost. Dakle, možemo postaviti: - margin-top: -15px.