Lunttilappua: Kuinka sisentää tekstiä CSS

Web resurssi käyttäjät arvostavat sen ulkonäköä. Siksi jopa hyödyllistä tekstiä tietoja ei voida lukea, koska se on huonosti suunniteltu. Päätelmät - täytyy huolellisesti ja huomaavainen paitsi semanttisen sisällön sivuja, mutta myös sen visuaalinen esitys. Kynnyksellä CSS teknologian lisännyt mahdollisuuksia luoda houkuttelevan artikkeleita. Yksi ominaisuuksia, joiden tarkoituksena on helpottaa käsitys asetetut - luetelmakohdan CSS tekstiä.

Marginaaleja: mikä on ero?

Ennen kuin aloitat muotoilla tekstiä, sinun pitäisi ymmärtää, mitä marginaalit ja täyte. Huolimatta siitä, että nämä Merkintäelementit joissakin tapauksissa samannäköisiä käyttäjälle, on perustavanlaatuisia eroja:

• kenttä asettaa pehmuste omaisuus luetelmakohta - marginaali;
• kenttä määritetään ero sisältö ja lohkorajan, tila - välillä rajojen vierekkäisten lohkojen;
• kenttä voidaan pitää osana koon (leveys ja korkeus) ja ei.

margin ominaisuus

Joten, asettaa vaakasuoraan tai pystysuoraan täyte CSS tekstiä, käyttää mallia marginaali. Tämä ominaisuus koskee tag

kohta perusasiakirjaan. Yksinkertaisimmillaan se voidaan kirjoittaa:

margin: 12px.

Tämä rivi tarkoittaa, että noin lohkon tekstin (tai mikä tahansa muu lohko) puolelta on sijoitettu syvennykseen 12 pikseliä. Lisätä aikaväli, esimerkiksi kolme kertaa riittää kirjoittaa:

margin: 36px.

Mutta mitä jos lohkojen välillä välin pitäisi olla erilainen kummallakin puolella? Web-kehittäjät käyttävät useita muotoja Records:

1. margin: 11px 22px.
2. margin: 11px 22px 33px.
3. margin: 11px 22px 33px 44px.

Ensimmäisessä esimerkissä, syvennys 11 pikselit on valmistettu alemman ja ylemmän rajojen lohkon sivuilla lohkon - 22 pikseliä. Erään toisen tietueen yksikön ylemmän reunan ja sisältö on 11 pikseliä, alemman - 33 pikselin kummallakin puolella - 22 pikseliä. Kolmannessa tapauksessa CSS sisennys teksti arvo on 11 pikseliä ylhäältä, oikealla puolella 22 pikseliä, 33 pikseliä ja 44 pikseliä vasemmassa alareunassa.

Saatavilla on myös kyky tallentaa etäisyys lohkon rajan toisella puolella vain: margin-top, margin-bottom , margin-left, margin-right. Kääntäminen nimet ominaisuuksien venäjän kielellä, se on helppo arvata heidän nimittämistään. Esimerkiksi seuraava merkintä osoittaa, että painuman oikealla on sama kuin 22 pikseliä:

margin-right: 22rh.

Ja jäljellä oleva matka sivujen ympäri lohkon oletetaan olevan arvoa emoelementin.

Margin ominaisuus on ominaisuuksia, jotka kehittäjä tarvitsee muistaa, kun CSS tekstiä sisennetty pystysuunnassa. Välein vierekkäisten elementtien ei summataan, ja toistensa päälle. Oletetaan esimerkiksi, että yksi laitteista on marginaali-bottom: 15px, ja alle viereisen lohkon margin-top: 35px. Koulu aritmeettinen ja terve järki, että koko niiden välistä etäisyyttä on 50 kuvapistettä. Käytännössä se ei ole. Lohko on suuri kiinteistön arvoa marginaalin «niellä" lähimmäisensä. Seurauksena, väli elementtien on 35 pikseliä.

"Red" viiva

Making dokumentti tekstieditori, käyttäjät haluavat kysyä jokaisen uuden kappaleen kanssa "punainen" viiva. CSS teksti luetelmakohtaa vasemmalla on helppo tehdä - käyttää tekstiä sisennyksen muotoilu. Kirjoitettu näin:

text-luetelmakohta: 11px.

Tämä on ensimmäinen rivi kappaleen siirtyy suhteessa vasempaan reunaan 11 pikseliä. Jotta tekstin sivun näytti enemmän kuin asiakirjan editorin, kannattaa asentaa ylimääräinen perustelu, eli kirjoittaa:

text-luetelmakohta: 11px;

text-align: perustella.

Lisäksi pikselit, kuvauksessa käytetään muita markup yksiköt - tuuman vaatii prosenttia. Anna laitteen on CSS teksti sisennystä 10%. Kun lohkon leveys 500 pikseliä, punainen viiva on 50 pikseliä (10% 500).

Tämän ominaisuuden voi näytteille arvo perivät. Tämä levy kertoo, että laite käyttää samantapaista ominaisuus vanhemman yksikön.

text-luetelmakohta: perivät.

Yllättäen painuman voi ottaa negatiivisia arvoja! Tässä tapauksessa ulokkeet on muodostettu ns, joka on perus teksti pysyy paikallaan, ja ensimmäinen rivi on siirtynyt vasemmalle 22 pikseliä:

text-luetelmakohta: -22px.

Kirjaimet eivät sivuuttaa vasempaan reunaan selaimen lisäksi tekstissä-luetelmakohtaa tulisi käyttää määrittelemään rakenteen kentän:

padding-left: 22px.

hyödyllisiä vinkkejä

Perusominaisuudet CSS muotoiluja tekstiä pidetään. Ja korjata ne apua käytännössä. Tässä muutamia lopullinen vinkkejä soveltaa opittua Web-kehitys:

• punainen viiva ja sisennystä teksti - eri käsitteitä ja erilaisia ominaisuuksia käytetään niiden ohjausta;
• pystysuora sisennys säännöt eivät koske matematiikkaa - välein päällekkäisiä, "voittaa" elementti suuremman arvon;
• negatiivinen sisennys käytetään osoittamaan ensimmäinen rivi kappaleen kuvalla.