Fusklakan: Hur man indrag text CSS

Webbresurs värderas av användarna för sin visuella intryck. Därför kan även användbar textinformation inte läsas på grund av det faktum att det är dåligt utformade. Slutsats - behovet av att noggrant och uppmärksam inte bara det semantiska innehållet sidor, utan även utifrån visuell presentation. Tillkomsten av CSS-tekniken ökar möjligheten att skapa en attraktiv artiklar. En av de egenskaper, som syftar till att underlätta uppfattningen av skriftlig - strecksats CSS text.

Marginal och padding: vad är skillnaden?

Innan du börjar att formatera text, bör du förstår vad marginaler och utfyllnad. Trots det faktum att dessa markeringselement i vissa fall ser likadana för användaren, det finns grundläggande skillnader mellan dem:

• fält sätter vadde egendom, strecksatsen - marginal;
• fält bestäms genom ett gap mellan innehållet och blockgränsen, ett utrymme - mellan gränserna för närliggande block;
• området kan betraktas som ett element i storlek (bredd och höjd) och nr.

marginal egendom

Så, för att ställa in horisontellt eller vertikalt vadde CSS text, använda designen marginal. Denna egenskap gäller taggen

punkt samlingsdokument. I det enklaste fallet kan det skrivas som:

margin: 12px.

Denna linje betyder att runt ett block av text (eller något annat block) på alla sidor är placerad i fördjupningen 12 pixlar. För att öka intervallet, till exempel, är tillräckligt för att skriva tre gånger:

margin: 36px.

Men vad händer om mellan blocken i intervallet bör vara olika på varje sida? Webbutvecklare använder flera former av poster:

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

I det första exemplet är inbuktningen 11 pixlar tillverkade av de nedre och övre gränserna för blocket, på sidorna av blocket - med 22 pixlar. Enligt en andra post enhet mellan den övre kanten och innehållet kommer att vara 11 pixlar, mellan den nedre - 33 pixel på varje sida - med 22 pixlar. I det tredje fallet CSS strecksatsen text kommer att ha ett värde av 11 pixlar från toppen, höger sida 22 pixlar, 33 pixlar och 44 pixlar från det nedre vänstra.

Det finns även möjlighet att spela in avståndet från blockgränsen på endast en sida: margin-top, margin-bottom , margin-vänster marginal till höger. Översätta namnen på fastigheterna i det ryska språket, är det lätt att gissa om deras utnämning. Till exempel visar följande post som indraget till höger kommer att vara lika med 22 pixlar:

margin-höger: 22rh.

För den återstående avståndet kring sidorna hos blocket antas vara lika med värdet på det överordnade elementet.

Marginal Fastigheten har funktioner som en utvecklare måste komma ihåg när du använder CSS text indragen vertikalt. Intervall av intilliggande element är inte summeras, och överlagras på varandra. Till exempel, anta att en av enheterna har en marginal-botten: 15px, och under den intilliggande blocket margin-top: 35px. School aritmetik och sunt förnuft säger att det totala avståndet mellan dem kommer att vara 50 pixlar. I praktiken är det inte. Ett block med ett högt värde på fastigheten marginal «swallow" sin granne. Som ett resultat, är intervallet mellan elementen 35 pixlar.

"Röd" linje

Att dokumentet i en textredigerare, användare föredrar att be varje nytt stycke med den "röda" linjen. Använda CSS text strecksatsen till vänster är lätt att göra - använda text-strecksatsen design. Skrivit det så här:

text-indent: 11px.

Det är den första raden i stycket förskjuts i förhållande till den vänstra marginalen på 11 pixlar. För att göra texten på webbsidan såg mer ut som ett dokument i editorn, bör du installera ytterligare en motivering, det vill säga skriva:

text-indent: 11px;

text-align: motivera.

Förutom pixlar, i beskrivningen av användningen av andra tagg Units - tums hävdar procent. Låt enheten har en CSS text indrag på 10%. När bredden på blocket av 500 pixel, kommer den röda linjen vara 50 pixlar (10% av 500).

För denna egenskap kan ställas ut värdet Inherit. Detta rekord säger att enheten använder en liknande egenskap hos föräldraenheten.

text-indent: ärva.

Överraskande, indrag kan ta på negativa värden! I detta fall är utsprången bildas av så kallade, är att den grundläggande texten förblir på plats, och den första raden skiftas till vänster med 22 pixlar:

text-indent: -22px.

Bokstäverna är inte vidare över den vänstra kanten av webbläsaren, utöver den text-stycket bör användas för att definiera strukturen av fältet:

padding-left: 22px.

användbara tips

De grundläggande egenskaperna hos CSS för att formatera text beaktas. Och fäst dem hjälp praktiken. Här är några sista tips om hur man tillämpar lärt material inom webbutveckling:

• den röda linjen och indraget av text - olika begrepp, och olika egenskaper som används för deras vägledning;
• vertikala indrag regler gäller inte matematiken - intervall överlappar varandra, "vinner" element med större värde;
• negativ indrag används för att indikera den första raden i ett stycke med en bild.