Pentru o afișare mai frumoasă a elementelor pe o pagină web, sunt utilizate indentări externe și interne în CSS, iar acum vom analiza acest lucru cu exemple.
Fiecare element, fie el un paragraf, div, imagine sau video, este un bloc în care puteți indenta atât interiorul cu proprietatea de umplere, cât și exteriorul cu marginea.
În CSS, aceste proprietăți sunt scrise pentru indentare în acest fel (de exemplu, este luat un paragraf):
În loc de eticheta P, vă scrieți elementul, desigur, pentru care va fi aplicată indentarea.
Este imperativ să înțelegeți și să vă amintiți acest lucru pentru parametrii de marjă iar construcția de umplere a crestăturilor pentru fiecare parte este aceeași.
Adică, avem 4 valori în fiecare liniuță:
Valori de indentare.
- Prima semnificație: liniuța de sus;
- Al doilea sens: indentare la dreapta;
- Al treilea sens: marginea inferioară;
- Al patrulea sens: stânga liniuță.
În acest exemplu, am făcut o marjă a căptușelii externe în css în acest fel: am scris 20px deasupra, 10px în stânga și în dreapta (de regulă, acestea sunt scrise la fel pentru simetrie), iar în partea de jos am indicat 30 px.
Și pentru căptușeala căptușelii interioare, am specificat: 10 px în partea de sus, stânga și dreapta și 14 px în partea de jos.
Valoarea pentru umplutura în marjă și proprietățile de umplere poate fi redusă, cu condiția să aibă aceeași dimensiune.
Din exemplul meu, notația prescurtată va arăta deja astfel:
Adică, când ultima intrare numerică lipsește, în acest caz pentru liniuța din stânga, browserul înlocuiește automat pentru liniuța din stânga aceeași valoare ca și valoarea din dreapta.
Și, în cazul meu, indentările din dreapta și din stânga vor fi 10 px fiecare, care este în marjă, care este în umplutură.
Și dacă aveți aceleași valori pentru marginile exterioare din partea de sus și de jos (de exemplu: 16px) și aceleași valori pentru marginile exterioare din stânga și din dreapta (de exemplu: 20px), atunci înregistrarea va avea o formă și mai prescurtată:
În consecință, pentru indentarea CSS interioară, intrarea este identică cu aceasta.
Aplicarea unei singure liniuțe: pentru fiecare parte separat.
Următoarele proprietăți cu o singură valoare se aplică pentru a specifica o indentare separată:
Proprietăți de căptușire pentru fiecare parte.
- marginea-sus: 3px; căptușeală superioară exterioară;
- margine-stânga: 4px; marginea stângă exterioară;
- margine-dreapta: 6px; marginea exterioară dreaptă;
- marginea de jos: 10 px; căptușeala exterioară a fundului.
Intrările sunt scrise în același mod pentru căptușirea internă, doar că trebuie să înlocuiți marginea cu căptușeala.
De exemplu, aveți deja toate indentările în css pentru toate imaginile img.
Aceasta este (pentru claritate) căptușeala exterioară are următoarele valori: 10px de sus, stânga și dreapta: 20px fiecare și 14px de jos.
Și căptușeala este de 6 px pe toate cele 4 laturi.
Să presupunem că ați decis să puneți o altă imagine pe pagină, dar pentru aceasta doriți doar să modificați marginea exterioară din partea de sus și să lăsați restul așa cum este. Și pentru a îndeplini această sarcină, este suficient să scrieți o clasă pentru această imagine și să adăugați o intrare suplimentară la CSS.
Drept urmare, imaginea pe care ați adăugat-o cu clasa verx va accepta toată indentarea specificată în css pentru eticheta img și va modifica doar marja pentru partea superioară (în cazul nostru: 40px).
Am încercat să fac descrierea pentru indentare CSS mai detaliată, dar dacă aveți întrebări, puneți-le prin comentarii.
Descriere
Setează cantitatea de umplutură de la marginea dreaptă a elementului. Umplerea este distanța de la marginea exterioară a marginii drepte a elementului curent până la hotarul interior elementul său părinte (fig. 1).
Sintaxă
margin-dreapta: valoare | auto | moşteni
Valorile
Cantitatea de umplere potrivită poate fi specificată în pixeli (px), procent (%) sau alte unități acceptabile pentru CSS. Valoarea poate fi fie pozitivă, fie negativă.
Auto Indică faptul că dimensiunea indentărilor va fi calculată automat de browser. mosteneste Moștenește valoarea de la părinte.
HTML5 CSS2.1 IE Cr Op Sa Fx
Rezultatul acestui exemplu este prezentat în Fig. 2.
Orez. 2. Aplicarea proprietății de marjă-dreapta
Model de obiect
document.getElementById ("elementID") .style.marginRight
Browsere
Browser Internet Explorer 6 dublează valoarea de umplere la stânga sau la dreapta pentru elementele plutite imbricate în elementele părinte. Căptușeala adiacentă părții părintelui este dublată. Problema este de obicei rezolvată adăugând display: inline la elementul plutit.
Internet Explorer până la versiunea 7.0 inclusă nu acceptă valoarea de moștenire.
Se întâmplă că atunci când creăm un element sau un aspect, trebuie să creăm o liniuță orizontală, astfel încât să fie relativă una cu cealaltă. Poate fi ca blocuri sau diverse elemente, sau mai bine zis, este de a face distanța astfel încât să fie setată inițial între blocurile situate în vederea orizontală. Exista căi diferite privind crearea de indentări pe elementele de design. Cu toate acestea, pentru compatibilitatea cu mai multe browsere moderne aici vom atinge subiect relevant prin indentare ca text sau bloc pe pagină.Proprietatea determină cât spațiu text orizontal să se înfășoare înainte de începerea primei linii a elementului text. Distanța este calculată de la început de la marginea elementului și containerul pentru nivelul blocului.
Deoarece majoritatea conținutului unei pagini web este prezentat sub formă de text, abilitatea de a stiliza textul atât atractiv cât și eficient este o abilitate importantă care poate deveni un web designer. Cea mai frecvent utilizată și recomandată metodă pentru indentarea descrierii și a paragrafului este utilizarea CSS. Aici veți fi furnizat diverse exemple modul în care CSS poate fi folosit pentru text și element de indentare.
Setați marja superioară în CSS
Pentru a crea marje de sus, cu siguranță nu ne putem lipsi de proprietățile CSS, de aceea avem nevoie de marginea de sus, această valoare poate fi setată în moduri diferite, atât în px, cât și în mod standard pe pixeli, em,% și așa mai departe, că totul se întâmplă în stilistica CSS în unități de măsură.
Exemplu de utilizare:
Bloc de marjă (
marginea de sus: 50 px;
}
Ce puteți privi la imagine:
De asemenea, îl puteți folosi pentru a fixa blocuri, apoi aici puteți utiliza o proprietate numită marginea-stânga de asemenea margine-dreaptași marginea-jos... În cazul în care indicăm pur și simplu proprietatea marginii, unde este posibilă setarea inițială a 4 parametri pentru aceasta, aici vom lua în considerare în sensul acelor de ceasornic conceptul, unde începem din partea superioară și continuăm sub fiecare parte.
marjă: 20px 50px 30px 50px;
Așa va funcționa marjă: sus dreapta jos stânga:
De asemenea, are căptușeală în CSS
Se întâmplă să aveți nevoie să aliniați vertical un element de conținut, acest lucru este relativ la blocul părinte, aici este posibil să utilizați alte proprietăți, cum ar fi padding-top, care, sau mai bine zis, implicit, setează padding-ul în sus. Dacă vorbim despre proprietăți similare, care pot fi, de asemenea, scrise și setate prin analogie, atunci aici vine marja în px, em,% și alte unități.
Exemplu:
Bloc de umplere (
căptușeală: 47px;
}
Să vedem un exemplu:
Acum putem lua în considerare un analog al proprietății marjăși căptușeală, care este folosit pentru setarea indentărilor pe celelalte părți ale elementului bloc, dar merge deja separat: umplutură-stânga, umplutură-dreapta, umplutură de fund... Unde puteți seta imediat distanța de care aveți nevoie, numai pentru toate părțile, și totul va fi în același timp.
umplutură: 10px 20px 40px 50px;
Aici puteți seta inițial valoarea ca pentru marjăîncepând după cum înțelegeți de sus, dar apoi totul merge în sensul acelor de ceasornic, este în dreapta, dedesubt, în stânga și așa mai departe.
Acum, în funcție de situația diferită, aveți ocazia să faceți indentări pe lângă stilurile CSS, unde folosim proprietățile marjăși căptușeală că este posibil să afișați elementele necesare pe pagina resursei dvs. Internet, așa cum ați conceput și trebuie să faceți.
Buna! Inițial, am vrut să împart acest articol în 4 mici, dar apoi m-am gândit la asta. Pentru ce? La urma urmei, este mai convenabil atunci când astfel de informații sunt colectate în cadrul unui singur material.
Prin urmare, astăzi vom învăța cum să facem Indentare CSS stânga și toate celelalte fețe - dreapta, sus și jos. Acestea pot fi realizate pentru imagini și texte. Sunt de două tipuri:
- Extern;
- Intern.
Pentru prima, se utilizează marja de proprietate cheie, pentru a doua, padding. Pentru claritate, am făcut un mic exemplu pentru tine. Pentru a face vizual convenabil să se facă distincția între spațiul intern și cel extern, am adăugat un tabel vizibil. Să vedem ce s-a întâmplat?
Căptușeală externă
Înregistrându-le în fișierul de stil CSS, va fi posibil să setați orientarea blocului de informații de pe pagină. De exemplu, mutați-l spre stânga și în jos. Să demonstrăm imediat cum va arăta.
În general, puteți utiliza opțiunile de mai jos pentru a seta indentările.
Stânga (margine-stânga).
Dreapta (margine-dreapta).
Sus (margin-top).
Partea de jos (marginea-partea de jos).
Acum îți voi arăta o altă nuanță mișto.
După cum puteți vedea, puteți utiliza una dintre opțiuni - efectul este același. Numai în al doilea caz, codul este mai compact. De asemenea, rețineți că umplutura este în sensul acelor de ceasornic. Totul începe de sus și se termină în stânga.
Căptușeală internă
Procedura este similară aici. Abia acum voi adăuga noi proprietăți nu pentru întregul tabel, ci pentru conținutul coloanelor.
Să vedem ce s-a întâmplat.
Similar cu umplutura CSS extern poate fi scris într-un cod scurt sau pentru părți separat.
Acestea au fost punctele culminante. În cele din urmă, vă voi arăta cum puteți ușura o parte din muncă.
Indentare la nivelul etichetelor selectate
În cazurile pe care le-am analizat mai sus, acestea sunt setate pentru text și imagini în același timp. De fapt, puteți seta distanța față de elemente la nivelul unei etichete specifice. Vă voi arăta cum funcționează. Anulare ultimele modificăriși indică cod specialîn foaia de stil.
Să aruncăm o privire la ce s-a întâmplat după salvarea modificărilor.
Imaginea a rămas la locul său, doar textul închis în stânga s-a mișcat. Manipulări similare pot fi aplicate și altor blocuri, de exemplu, tr, span.
La fel de Informații suplimentare Propun o publicație despre sarcină pentru revizuire. Există, de asemenea, destui descriși moduri interesante... Poate fi util pentru formarea unei linii roșii în text sau efectuarea altor acțiuni.
În plus, există un abonament la distribuirea gratuită a informațiilor pe adrese de email... Pentru a vă abona la blog există formă specială... Pana data viitoare.
O resursă web este evaluată de utilizatori pentru atracția sa vizuală. Prin urmare, chiar și textul util din punct de vedere informațional poate să nu fie citit din cauza faptului că este slab formatat. Concluzie - trebuie să abordați cu atenție și cu atenție nu numai conținutul semantic al paginilor site-ului, ci și prezentarea vizuală a acestuia. Apariția tehnologiei CSS a extins posibilitățile pentru crearea de articole captivante. Una dintre proprietățile concepute pentru a facilita înțelegerea a ceea ce este scris este indentarea. Text CSS.
Margini și căptușeală: care este diferența?
Înainte de a începe formatarea textului, ar trebui să înțelegeți ce sunt marjele și indentările. În ciuda faptului că aceste elemente de marcare, în unele cazuri, arată la fel pentru utilizator, există diferențe fundamentale între ele:
- câmpul este setat de proprietate căptușeală, liniuță - marjă;
- marja este determinată de decalajul dintre conținut și marginea blocului, liniuța este între marginile blocurilor adiacente;
- marginile pot fi luate în considerare în dimensiunile elementului (lățime și înălțime) sau nu.
Proprietate de marjă
Deci, pentru a seta indentarea orizontală sau verticală a textului CSS, utilizați construcția marjă... Această proprietate se aplică etichetei a documentului care definește paragraful. În cel mai simplu caz, este scris ca:
margine: 12 px.
O astfel de linie înseamnă că în jurul blocului de text (sau a oricărui alt bloc), se va face o liniuță de 12 pixeli pe toate părțile. Pentru a crește intervalul, de exemplu, de trei ori, este suficient să scrieți:
marja: 36px.
Dar dacă distanța dintre blocuri ar trebui să fie diferită de fiecare parte? Dezvoltatorii web utilizează mai multe forme de scriere:
- margine: 11px 22px.
- marjă: 11px 22px 33px.
- marjă: 11px 22px 33px 44px.
În primul exemplu, se vor efectua indentări de 11 pixeli din marginile inferioare și superioare ale blocului și cu 22 de pixeli din părțile laterale ale blocului. Conform celei de-a doua forme de notare, vor exista 11 pixeli între marginea superioară a blocului și conținut, 33 pixeli între partea de jos și 22 de pixeli pe părți. În al treilea caz, umplutura va fi de 11 pixeli de sus, 22 de pixeli din dreapta, 33 de pixeli în partea de jos și 44 de pixeli din stânga.
De asemenea, este posibil să înregistrați distanța până la limita blocului pe o singură parte: margin-sus, margin-jos, margin-stânga, margin-dreapta... După ce ați tradus numele proprietăților în rusă, este ușor de ghicit despre scopul lor. De exemplu, următoarea intrare spune că linia din dreapta va fi de 22 de pixeli:
marginea-dreapta: 22 px.
Pentru restul laturilor, distanțele din jurul blocului sunt luate egale cu valoarea elementului părinte.
Proprietate marjă are o ciudățenie pe care dezvoltatorul trebuie să o amintească atunci când folosește indentarea verticală a textului CSS. Intervalele elemente învecinate nu sunt rezumate, ci suprapuse unele pe altele. De exemplu, lăsați unul dintre blocuri să aibă marginea de jos: 15 px, și blocul adiacent acestuia de jos marginea de sus: 35 px... Aritmetica școlară și bunul simț dictează faptul că spațiul total dintre ele va fi de 50 de pixeli. În practică, acest lucru nu este cazul. Blochează cu de mare valoare proprietăți marjăÎși va „înghiți” vecinul. Ca urmare, distanța dintre elemente va fi de 35 de pixeli.
"Linie rosie
Realizarea unui document în editor de text, utilizatorii preferă să specifice fiecare nou paragraf cu o linie „roșie”. CU folosind CSS nu este dificil să indentați textul spre stânga - se folosește construcția text-indent... Este scris astfel:
text-indent: 11px.
Adică, prima linie a paragrafului va fi deplasată în raport cu marginea stângă cu 11 pixeli. Pentru a face textul de pe pagina web mai asemănător unui document din editor, ar trebui să instalați suplimentar, adică să scrieți:
text-indent: 11px;
text-align: justifica.
În plus față de pixeli, atunci când descrieți marcajul, este permisă utilizarea altor unități - inci, puncte, procente. Lăsați blocul să aibă un text CSS de 10%. Cu o lățime de bloc de 500 de pixeli, linia roșie va fi de 50 de pixeli (10% din 500).
Această proprietate poate fi setată la moşteni... O astfel de intrare spune că blocul folosește o proprietate similară a blocului părinte.
text-indent: moșteni.
În mod surprinzător, poate lua și valori negative! În acest caz, se formează așa-numitele proeminențe, adică textul principal rămâne la locul său, iar prima linie este deplasată la stânga cu 22 de pixeli:
text-indent: -22px.
Pentru a împiedica trecerea literelor peste marginea stângă a browserului, în plus față de text-indent trebuie să utilizați construcția pentru a seta câmpul:
umplutură-stânga: 22 px.
Principalul Proprietăți CSS pentru revizuite. Practica va ajuta la consolidarea lor. Iată câteva sfaturi finale despre cum să aplicați acest material la dezvoltarea site-ului dvs. web:
- linia roșie și liniuța textului sunt concepte diferite și sunt utilizate proprietăți diferite pentru a le indica;
- pentru liniuțe verticale, regulile matematicii nu se aplică - intervalele sunt suprapuse, elementul cu o valoare mare „câștigă”;
- indentarea de paragraf negativă este utilizată pentru a indica prima linie a unui paragraf folosind o imagine.
