Cheat Sheet: Hvordan rykke tekst CSS

Nettressurs verdsatt av brukerne for sin visuelle appell. Derfor kan selv nyttig tekstinformasjon ikke leses på grunn av det faktum at det er dårlig utformet. Konklusjon - behovet for å nøye og oppmerksomme ikke bare til det semantiske innholdet på sidene, men også til den visuelle presentasjonen. Ankomsten av CSS-teknologien økt mulighet til å skape en attraktiv artikler. En av egenskapene, ment for å forenkle oppfatningen av skriftlig - indent CSS tekst.

Margin og padding: hva er forskjellen?

Før du begynner å formatere teksten, bør du forstå hvilke marginer og padding. Til tross for at disse markeringselementer i enkelte tilfeller ser det samme til brukeren, det er grunnleggende forskjeller mellom dem:

• feltet setter padding eiendom, innrykk - margin;
• felt bestemmes av en spalte mellom innholdet og blokkgrensen, en plass - mellom grensene av tilstøtende blokker;
• felt kan betraktes som et element i størrelse (bredde og høyde), og ingen.

margin eiendom

Så, for å sette den horisontale eller vertikale padding CSS tekst, bruke design margin. Denne egenskapen gjelder tag

avsnitt originaldokument. I det enkleste tilfellet, kan det skrives som:

margin: 12px.

Denne linjen vil si at rundt en blokk av tekstmeldinger (eller hvilken som helst annen blokk) på alle sider er plassert i fordypningen 12 piksler. For å øke intervallet, for eksempel tre ganger er nok til å skrive:

margin: 36px.

Men hva om mellom blokkene i intervallet bør være forskjellig på hver side? Webutviklere bruke flere former for registre:

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

I det første eksempel er innsnitt 11 bildeelementer laget av de nedre og øvre grenser av blokken, på sidene av blokken - ved 22 piksler. I henhold til en annen plateenhet mellom den øvre kant og innholdet vil være 11 bildeelementer, mellom den nedre - 33 piksler på hver side - ved 22 piksler. I det tredje tilfellet CSS strek teksten vil ha en verdi av 11 piksler fra den øvre, høyre side 22 piksler, 33 piksler og 44 piksler fra nederst til venstre.

Også tilgjengelig er evnen til å registrere avstanden fra blokkgrensen på den ene side bare: margin-top, marg-bunn , marg-venstre, marg-høyre. Sette navnene på eiendommer i det russiske språket, er det lett å gjette om deres avtale. For eksempel indikerer følgende oppføring at hakket på høyre vil være lik 22 piksler:

margin-right: 22rh.

For den resterende avstand rundt sidene av blokken antas å være lik verdien av den overordnede elementet.

Margin hotellet har funksjoner som en utvikler trenger å huske når du bruker CSS tekst innrykket vertikalt. Intervaller på tilstøtende elementer er ikke summert, og overlagret på hverandre. For eksempel, anta at en av enhetene har en margin-bottom: 15 piksler, og under den tilstøtende blokk margin-top: 35px. Skole aritmetiske og sunn fornuft tilsier at den totale avstanden mellom dem vil være 50 piksler. I praksis er det ikke. En blokk med en stor verdi av eiendommen margin «svale" hans nabo. Som et resultat av dette intervallet mellom elementene er 35 piksler.

"Red" linje

Making dokumentet i et tekstredigeringsprogram, brukere foretrekker å spørre hvert nytt avsnitt med "rød" linje. Ved hjelp av CSS tekst innrykk på venstre er lett å gjøre - bruke tekst-innrykk design. Skrevet det slik:

text-indent: 11px.

Det vil si at den første linjen i avsnittet er forskjøvet i forhold til den venstre margen av 11 piksler. For å gjøre teksten på nettsiden så mer ut som et dokument i editoren, bør du installere en ekstra begrunnelse, det vil si, skriv:

text-indent: 11px;

text-align: rettferdiggjøre.

I tillegg til bildeelementer, i beskrivelsen av bruken av andre markerings Units - tommers krav prosent. La enheten har en CSS tekst innrykk på 10%. Når bredden av blokken av bildeelementer 500, vil den røde linje være 50 bildepunkter (10% av 500).

For denne eiendommen kan bli utstilt verdi arve. Denne posten sier at enheten bruker en tilsvarende eiendom på foreldreenheten.

text-indent: arve.

Overraskende, innrykk kan ta på negative verdier! I dette tilfelle er fremspringene dannet ved såkalt, er at den grunnleggende tekst forblir på plass, og den første linje er forskjøvet til venstre ved 22 piksler:

text-indent: -22px.

Bokstavene er ikke gått over til venstre kant av nettleseren, i tillegg til tekst-innrykk bør brukes til å definere strukturen av feltet:

padding-left: 22px.

nyttige tips

De grunnleggende egenskapene til CSS for formatering av tekst er vurdert. Og fikse dem hjelp praksis. Her er noen siste tips om hvordan du kan bruke lært materialet i webutvikling:

• den røde linjen og innrykk av tekst - forskjellige konsepter, og ulike egenskaper som brukes for deres veiledning;
• vertikale innrykks reglene gjelder ikke matematikk - intervaller overlapper hverandre, "lager" element med større verdi;
• negativ skår brukt til å indikere den første linje i et avsnitt med et bilde.