HTML vodiči: CSS razmak između redaka

Razmak između redova CSS je vrlo potreban za oblikovanje teksta. Svaki stručnjak ih uvijek koristi ako kreira prekrasnu web-lokaciju. Zahvaljujući tim atributima, možete izvoditi sve operacije s tekstom.

U pravilu, većina dizajnera ne voli zadani raspored teksta u html-u. CSS razmak između redova omogućuje vam da prilagodite gotovo sve što možete zamisliti. A ako odete duboko, možete učiniti ono na što niste mislili.

Kako napraviti prored teksta u CSS-u

Važno je razumjeti da možete postaviti veličinu redaka, uvlake itd. Na sve elemente na kojima se nalazi tekst. Na primjer, svi ti atributi izvrsni su za:

• stavak;
• popisi;
• ;
• tablice;
• naslova;
• i sve ostalo gdje objavljujete tekst.

S obzirom na razmak između redova CSS, prije svega obratite pozornost na sljedeće atribute.

U "Photoshopu" postoji koncept Leading. Ne postoji takav atribut u CSS-u, ali zahvaljujući tome može se objasniti bit. Zapravo, to je udaljenost između linija.

U CSS-u, veličina retka se postavlja pomoću parametra line-height i font-size. Kao što možete vidjeti, slika jasno navodi da je veličina fonta veličina fonta. Ni jedno slovo ne prelazi ta ograničenja.

Visina linije je udaljenost od sredine gornjeg vodećeg do sredine donjeg vodećeg. Sve to prikazano je na slici.

Imajte na umu da ako navedete visinu retka manju od veličine fonta, linije će se preklapati. Budite sigurni da slijedite ovo kako biste izbjegli takvu situaciju.

Neki ljudi misle zašto je veličina fonta rastegnuta niže od crte slova. Jednostavno je. Uostalom, postoje slova koja su niža od glavne razine linije. Donja slika je jasan primjer gdje se simboli koriste, rastegnuti gore i dolje.

Kao što možete vidjeti, slova zauzimaju cijeli raspon veličine fonta. I visina linije je veća, i jednak prostor dodan je na obje strane.

Vrijednost atributa visine retka može biti bilo koja:

• piksela;
• inča;
• stavke;
• interes;
• i drugi koji se koriste u CSS-u.

Ne možete navesti negativnu vrijednost. Na primjer, ako navedete faktor jednak jednom i polu, u tekstu dobivate standardni interval od jedan i pol.

Ako navedete u postocima, imajte na umu da je 100% u visini retka jednako vrijednosti veličine fonta.

Osim toga, možete odrediti vrijednost normalnog ili naslijediti. Ako navedete normalno, preglednik će prema vlastitom nahođenju automatski izračunati udaljenost između linija. Vrijednost može biti različita, jer ovisi o pregledniku. Preporučuje se postavljanje određenog broja kako bi svi korisnici imali istu stvar.

Naslijedi znači da će vrijednost biti ista kao i nadređeni element.

Detaljniji dizajn

CSS razmak redaka zapravo nije ograničen na gore navedene atribute. Udaljenost se i dalje prilagođava atributima margine i padding. Ako atribut navedete točno kao margin = '5px', onda će sa svih strana retka (stavka) biti dodana udaljenost od 5 piksela.

Ako trebate navesti samo iznad odlomka, možete odrediti gornju granicu. Prijevod je vrlo jednostavan. Tako će biti moguće postaviti uvlake sa svake strane.

Imajte na umu da postoji i atribut padding. Radi točno kao margina. Možete postaviti i ukupnu uvlačenje i određeni smjer (lijevo, desno, gore, dolje).

Pogledajte pažljivo gornji crtež. Margina - uvlačenje izvan objekta i padding - unutar.

Ti atributi su globalni. Mogu se primijeniti na sve - slike, tablice, tekst, veze i tako dalje.

Zapamtite ovo jednom zauvijek. To je vrlo važna točka u dizajnu objekata. Na primjer, zahvaljujući margini, možete odrediti uvlake između teksta i slika u njemu. Ako ove alineje nisu prisutne, tekst će biti postavljen blizu slike.

Ako imate tekst u tablici, upotrijebite padding kako biste spriječili da se tekst pridržava rubovima tablice, jer to izgleda ružno. A ako postavite uvlačenje od najmanje 5 piksela, to će već izgledati mnogo bolje. Pored visine, linija ima širinu atributa.

Ponekad je ovo vrlo potrebna imovina. Donja slika prikazuje primjer različite širine teksta.

Primjer dizajna

Stvaranjem dizajna web-lokacije, uvijek biste trebali učiniti tekst čitljivim što je više moguće. Ako je korisniku teško čitati tekst (premali ili preveliki), on će jednostavno zatvoriti vašu web-lokaciju.

Pokušajte usporediti dva odlomka prikazana na slici ispod. Koji tekst želite pročitati?

CSS razmak linija osmišljen je tako da olakšava percepciju teksta. Također ne zaboravite da se različiti fontovi mogu razlikovati po početnoj visini.

Radi jasnoće, možete provjeriti u bilo kojem uređivaču. Usporedite nekoliko fontova.

Napominjemo da su svi fontovi napisani u 24 piksela. Kao što možete vidjeti, svi se razlikuju po visini i širini slova. Ako usporedite dimenzije više, razlika će biti očitija.

CSS: prored u popisu

Podešavanje intervala primjenjuje se na popisima. Osim toga, u stilovima popisa, gore opisana margina i padding su karakteristični. Zahvaljujući ovom popisu postaju ljepši od standarda. Pomoću svih tih atributa možete postaviti:

• Visina stavki popisa.
• Uvući tekst za lijevo.
• Uvuci za crte iznad i ispod.
• Maksimalna širina svake stavke.

zaključak

Posjedovanje takvog skupa atributa, možete igrati s dizajnom ne samo linija, ali sve što želite. To su globalni parametri kojima apsolutno svi elementi podliježu (iznimka je veličina fonta, budući da je samo za tekst).