Käytä CSS-rivi-korkeusominaisuutta saadaksesi CSS-rivivälit
Opi käyttämään CSS-tyylin ominaisuuslinjan korkeutta, jotta voit vaikuttaa Web-sivujen riviväliin.
CSS-rivivälien arvot
CSS-tyylin ominaisuuslinjan korkeus vaikuttaa CSS-rivivälillä. Tämä ominaisuus vie 5 eri arvoa:
- normaali: selaimessa määritetään kirjasinkokoa vastaavan riviväliarvon arvo. Tämä on yleensä sama kuin kirjasinkoko tai hieman suurempi (kuten 20%).
- periä: riviväli on otettava emo-elementin rivivälistä. Joten jos asetat kehontunnisteen rivin korkeuden 30 prosenttiin suuremmaksi kuin fonttikoko ja kohdetunnisteet, jotka on asetettu perimään, niillä on myös 30% suurempi viivakorkeus kuin kirjasinkoko.
- numero: Jos linjan korkeuden arvolla ei ole mittayksikköä, sen katsotaan olevan kerroin linjan korkeuden kirjasinkokoon. Joten linjan korkeus 1,25 olisi 25% suurempi kuin kirjasinkoko.
- pituus: Jos rivin korkeuden arvolla on mittayksikkö, se on tarkka määrä tilaa, jonka pitäisi olla rivien välissä. Joten 1,25 mm johtaisi riveihin 1,25 millimetriä erilleen.
- prosenttiosuus: jos rivin korkeus on prosenttiosuus, se olisi prosenttiosuus fontin koosta. Tällöin 125%: n viivan korkeus olisi 25% suurempi fontin koon mukaan.
Mitä arvoa käytät CSS-linjan välityksellä
Useimmissa tapauksissa paras valinta rivivälille on jättää se oletuksena - tai "normaaliksi". Tämä on yleensä kaikkein luettavissa ja ei edellytä, että teet mitään erityistä. Mutta rivivälien muuttaminen voi antaa tekstillesi erilaisen tuntemuksen.
Jos fonttikoko on määritetty emsiksi tai prosenttiosuuksiksi, myös rivinkorkeus on määriteltävä niin. Tämä on joustavin rivivälin muoto, koska se sallii lukijan muuttaa fonttien kokoa ja pitää samalla suhdetta linjan välissä.
Aseta viivan korkeus tulostustyyliarkeille pisteellä (pt). Piste on tulostustoimenpide, joten fonttien koon on oltava myös pisteissä.
En halua käyttää numeroiden valintaa, koska olen havainnut, että se on hämmentävää ihmisille. Monet ihmiset ajattelevat, että määrä on absoluuttinen koko, joten ne tekevät siitä valtavan. Voit esimerkiksi asettaa fontin 14px: llä ja asettaa sitten rivin korkeuden 14: een, mikä johtaa valtavaan aukkoon rivien välillä - koska rivien välinen etäisyys on 14 kertaa fontin koko.
Kuinka paljon tilaa käytät linjan välityksellä
Kuten edellä mainitsin, suosittelen käyttämään oletusriviväliä, ellei sinulla ole erityistä syytä muuttaa sitä. Rivivälillä voi olla erilaisia vaikutuksia:
- Tekstiä, joka on hyvin tiivis, voi olla vaikea lukea. Pienet viivatilat voivat kuitenkin vaikuttaa tekstin mielialaan. Jos tekstiä käsitellään yhdessä, se voi tehdä tekstin tuntua tummemmalta tai jännittyneemmältä.
- Myös kauempana olevia tekstiä voi olla vaikea lukea. Mutta laajat viivatilat tekevät tekstistä näyttävän virtaavammalta ja fluidisemmalta.
- Rivivälien muuttaminen voi tehdä tekstistä, joka muutoin ei sovi paikkaan, olisi kompakti tai vie enemmän tilaa malleissasi.