Sanavälit - CSS-temppuja

Anonim

word-spacingOmaisuus on samanlainen letter-spacing, vaikka ei tietenkään sen käyttöä säätelee määrä väli sanat pala tekstiä, ei yksittäisten merkkien.

p ( word-spacing: 2em; )

word-spacing voi vastaanottaa kolme erilaista arvoa:

  1. "normaali" avainsana, joka nollaa oletusvälin
  2. pituusarvot käyttämällä mitä tahansa CSS-yksikköä (yleisimmin px, em, rem)
  3. "peri" avainsana, joka käyttää word-spacingylätason elementin

Paras käytäntö tällä hetkellä olisi käyttää em. Kirjasinkokoa voidaan säätää, joten pikselien käyttö tähän saattaa aiheuttaa ongelmia sanojen välissä, koska niiden koko ei skaalaa. remon yleensä hieno, mutta selaintuki on pienempi, ja tässä käyttötapauksessa on luultavasti parasta, että väli liittyy suoraan sanoihin, joihin sitä käytetään, ei juuriin.

On tärkeää huomata, että "sana" viittaa tässä yhteydessä yksittäiseen kappaleeseen sisäistä sisältöä, mikä tarkoittaa, että se word-spacingvaikuttaa inline-blocksekä inlineelementteihin että elementteihin. Tässä esimerkissä useita tällaisia ​​elementtejä on sijoitettu toisistaan ​​asettamalla word-spacingniiden emosäiliö:

Katso tämä kynä!

Kiinnostavat paikat

  • word-spacingOmaisuus on animatable CSS siirtymiä.
  • Vaikka "prosentti" -arvon käyttö etäisyyden määrittämiseen on sallittua spesifikaation mukaan, se voi tuottaa arvaamattomia tuloksia - usein vain ei lainkaan vaikutusta.
  • Valkotilan asettaminen nollaksi on yksi tapa torjua inline-lohkoelementtien välistä tilaa.

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
Toimii Toimii Toimii Toimii Toimii Useimmat Toimii

Huomautus Android-selaintuesta: Suurin osa Android-laitteista tukee word-spacingkuitenkin - jotkin laitteet, jotka käyttävät Web-paketin muita kuin Applen rakennettuja versioita, tai Netfront-selain eivät. Yksityiskohdat on kuvattu yllä olevassa QuirksMode-linkissä.