Indedente în HTML CSS. CSS Indentare: Poziționarea conținutului

Se întâmplă că atunci când creați un element sau un aspect, trebuie să creăm o liniuță orizontală, astfel încât să fie relativă unul cu celălalt. Poate fi ca blocuri sau diferite elemente sau mai degrabă, este de a face o distanță de a fi specificată inițial între blocurile situate orizontal. Există modalități diferite de a crea liniuțe pe elementele de design. Cu toate acestea, pentru compatibilitatea cu mai multe browsere moderne aici, vom atinge un subiect actualizat la returnare ca text sau bloc pe pagină.

Proprietatea determină cât de mult spațiul textului orizontal trebuie transferat înainte de primul rând al elementului de text. Intervalul este calculat din elementul inițial de la margine și containerul de nivel al blocului.

Deoarece cea mai mare parte a conținutului paginii web este reprezentat ca un text, capacitatea de a stiliza acest text este atrăgătoare și eficientă, este o abilitate importantă care poate deveni un designer web. Pentru a crea o descriere și un paragraf, metoda cea mai frecvent utilizată și recomandată va utiliza CSS. Aici veți primi diferite exemple despre modul în care CSS poate fi utilizat pentru text și un element de liniuță.

Setați o liniuță externă de la CSS

Pentru a crea liniuțe superioare, este cu siguranță fără proprietăți CSS, deoarece avem nevoie de margine-top, această valoare poate fi specificată diferit ca în Px și standard pe pixeli, em,% și așa mai departe, că totul se întâmplă în stilistica CSS măsurători de unități.

Exemplu de utilizare:

Margin-bloc (
Margin-top: 50px;
}

Ce pot să mă uit la imagine:

De asemenea, îl puteți folosi pentru a ridica blocuri, aici puteți utiliza o proprietate numită margine-stânga. de asemenea marginea-dreapta. și marginea de fund. Unde specificăm pur și simplu proprietatea de marjă, unde este posibil să se stabilească inițial 4 parametri, aici vom arăta în sensul acelor de ceasornic pentru conceptul în care începem din partea superioară cu o continuare a fiecărei părți.

marja: 20px 50px 30px 50px;

Așa va funcționa margine.: de sus în dreapta din stânga jos:

Există, de asemenea, o liniuță internă de la CSS

Se întâmplă că este necesar să se alinieze conținutul conținutului vertical, acest lucru este relativ la blocul părinte, există o oportunitate de a utiliza alte proprietăți ca și padding-top, ceea ce face, și mai precis în mod prestabilit se stabilește liniuța internă . Dacă vorbim despre proprietăți similare, care pot fi, de asemenea, prescrise și stabilite pe analog, atunci marja merge aici în px, em,% și alte unități.

Exemplu:

Padding-bloc (
Padding-Top: 47px;
}

Ne uităm la exemplul:

Acum puteți lua în considerare proprietatea analogică margine. și padding.care este implicată în sarcina de a indica alte părți ale elementului bloc, dar deja vine separat: padding-stânga., căptușeală-dreapta, umplutură de fund. Unde puteți cere imediat distanța de care aveți nevoie numai pentru toate părțile și totul va fi în același timp.

padding: 10px 20px 40px 50px;

Aici inițial puteți seta valoarea ca și pentru margine. Începând cum înțelegeți de sus, dar totul merge în sensul acelor de ceasornic, este de până la dreapta, de jos, pe stânga și așa mai departe.

În funcție de situația diferită, aveți posibilitatea de a face linii de mai sus pe stilurile CSS, unde folosim proprietățile margine. și padding.Este posibil să setați elementele necesare pe pagina resurselor dvs. de Internet, așa cum ați crezut și trebuie să faceți.

Descriere

Setează magnitudinea retragerii de la marginea dreaptă a elementului. O indentare este distanța de la marginea exterioară a limitei drepte a elementului curent la limita interioară a elementului părinte (figura 1).

Sintaxă

marginea-dreapta: valoare Auto | | moşteni.

Valori

Valoarea pensionării corecte poate fi indicată în pixeli (Px), procent (%) sau alte unități admise pentru CSS. Valoarea poate fi atât pozitivă, cât și negativă.

Auto indică faptul că dimensiunea indicatoarelor va fi calculată automat de browser. Moștenirea moștenește valoarea părintească.

HTML5 CSS2.1 IE CR OP SA FX

Rezultatul acestui exemplu este prezentat în fig. 2.

Smochin. 2. Aplicarea proprietății Margin-dreapta

Modelul obiectului

document.getelementbyid ("elementid") .Style.marginright

Browsere

Internet Explorer 6 Browser dublează valoarea liniei stângi sau drepte pentru elementele plutitoare investite în elementele părinte. Dimează acea liniuță, care este adiacentă părintelui părintelui. Problema este rezolvată, de obicei, prin adăugarea de afișare: Inline pentru un element plutitor.

Internet Explorer înainte de versiunea 7.0 nu acceptă valoarea moștenirii.

Salutări la blogul meu. CSS (mese de stil cascadă) oferă multe oportunități de a configura apariția paginilor web. Astăzi aș dori să arăt în curând cum să determinăm în CSS o indentare de sus sau pe orice altă parte pentru orice element.

Liniuță externă

Indentul extern este setat folosind proprietatea marjei. Cu aceasta, puteți seta liniuțele de la toate cele patru laturi sau puteți utiliza alte proprietăți: Margin-top, margine stânga, margine-dreapta, margine-fund, care vă permit să o faceți numai pe de o parte.

Indentul extern determină distanța la care marginea selectată a elementului va fi deplasată departe de alte elemente de pe pagină. De exemplu, scrieți:

P, div (
Margin-top: 20px;
}

Aceasta înseamnă că toate blocurile și paragrafele vor primi o liniuță în top de 20 de pixeli, adică marginea superioară va fi deplasată departe de elementele adiacente.

Indicele pot fi înregistrate pe fiecare parte numai cu aceeași proprietate de margine, care înregistrează 4 valori la rând:

Div (
Marja: 20px 10px 20px 10px;
}

Indicațiile vor fi date din marginile superioare, drepte, inferioare și stângi, respectiv. Deoarece în acest caz, ele sunt egale de partea opusă, atunci ar fi posibil să scrie astfel:

Div (
Marja: 20px 10px;
}

Prima valoare este indentarea de sus și de mai jos, iar al doilea - pe laturi.

Indicație internă

Indicele interne funcționează diferit - nu mișcă blocul de alte elemente și adaugă această distanță în interiorul elementului, deplasând conținutul (conținutul) blocului de margini. E confortabil. Unde ați văzut site-ul pe care textul începe în marginea superioară dreaptă a ferestrei?

Nu am văzut acest lucru deoarece dezvoltatorii web aplică întotdeauna liniuțe externe și interne, astfel încât textul să fie citit cât mai convenabil posibil. Indicele interne sunt scrise utilizând proprietatea de umplere, în care 4 valori pot fi transferate la toate marginile la toate marginile, respectiv.

De asemenea, similar cu marginea poate adăuga partea de titlu și setați distanța numai pentru aceasta. De exemplu, indentarea de sus poate fi scrisă utilizând padding-top. În general, proprietatea de umplere funcționează absolut similară cu proprietatea marjei.

De exemplu, puteți cita o astfel de cod:

Bloc (
Lățime: 200px;
Padding: 20px;
}

Ce credeți că va fi lățimea reală a elementului nostru? Acesta arată că este de 200 de pixeli, dar sunt adăugate cătușe pe părțile laterale pe fiecare parte pentru încă 20 de pixeli totale. Luați în considerare acest lucru atunci când layout.

De asemenea, ar dori să rețineți că umplutura este în mod normal stabilită numai de elemente bloc, este mai bine să nu-i dea. Marja funcționează în mod normal cu orice element.

Astăzi vom vorbi puțin despre principiile aspectului, și anume, despre modalitățile de organizare a unei liniuțe pe site-ul dvs. în anumite elemente.

Deoarece elementul în cauză, care trebuie să facă o liniuță, poate exista text, imagine, tabel sau orice alt element HTML. Principalul lucru este să urmați câteva reguli importante pe care le voi spune acum.

Dacă creați doar site-ul dvs., vă recomand în partea de sus a fișierului dvs. principal de stil Introduceți următoarele proprietăți:

* (-Webkit-Dimensioning: Border-cutie; -Moz-Dimensiune: Border-cutie; Box-Dimension: Border-cutie;) *: Înainte, *: După (-Webkit-Dimension: Border- Cutie; -Moz-dimensiune: Border-cutia; Box-Dimension: Border-cutie;)

De ce aveți nevoie de ea, întrebați? Vă răspund la întrebarea dvs. cu un exemplu vizual.

Să presupunem că aveți un astfel de element de aspect:

Acest lucru va arăta ca o opțiune fără a utiliza proprietățile descrise mai sus (element superior) și cu utilizarea lor (element inferior):

Ce este văzut aici? Că lățimea elementului din prima versiune (fără utilizarea proprietăților) a devenit mai indicată de indentarea adăugată, care nu este în întregime convenabilă și corectă în ceea ce privește aspectul.

Opțiunea cu proprietățile este mult mai estetică, dar de a utiliza este conștient, deoarece atunci când le adăugați la site-ul web gata, riscați să obțineți un design de conducere și "dureri de cap" sub formă de a aduce totul în subiect. Toate proiectele pe care le-am întâmplat de la zero nu au costat fără aceste proprietăți.

Și acum, de fapt, să vorbim despre opțiunile de organizare a indicatoarelor din elementele de pe site-ul dvs. cu exemple vizuale.

Indicație internă cu proprietăți CSS "Padding"

Așa că înțelegeți întreaga logică a lucrurilor, luați următorul fragment al aspectului, de exemplu:

cu stilurile tale:

Test_div (lățime: 250px, graniță: 1px solid;)

Versiunea vizuală este obținută:

Care este proprietatea " padding."? Ajută la organizarea unei liniuțe interne în elementele specificate. Adăugați la aspectul nostru o liniuță internă egală cu 10px:

Test_DIV (Lățime: 250px, Border: 1px Solid; Padding: 10px; // Independent intern 10px)

Vizual se dovedește astfel:

Numărul 10 din proprietate sugerează că în interiorul elementelor specificate cu fiecare dintre cele patru laturi este necesar să se adauge o liniuță egală cu 10px. Pixeli (PX) pot fi înlocuiți cu dobândă sau altă valoare acceptată în CSS.

Există două opțiuni. Indicații ale părților cu care este necesar să se facă liniuțe.

Primul - indică în mod clar părțile:

Padding-top: 10px; // liniuță internă 10px de la padding de mai sus: 10px; // indentare internă 10px dreapta-fund de fund: 10px; // liniuță interioară de fund 10px stânga: 10px; // liniuță internă 10px stânga

În acest caz, fiecare parte folosește proprietatea sa. ȘI al doilea:

Padding: 10px 0 0 0; // liniuță internă 10px de mai sus, orice altceva - 0px hatding: 10px 0; // liniuță internă 10px pe partea de sus și de jos, iar pe laturi - 0PX Hatding: 0 10px; // indentul intern 0px de sus și în jos și pe laturi - 10px

Există o listă simplă a valorilor, fiecare din care corespunde părții sale. Părțile sunt stabilite: Prima valoare este partea de sus, a doua - dreptul, al treilea este fundul și al patrulea - stânga, adică totul este în sens orar.

Dacă valorile sunt două (sus și dreapta), înseamnă că oglinda aceleiași valori coboară și la stânga și numai așa. Se pare că totul este clar. Dacă pentru unele dintre laturile nu trebuie să întrebați o liniuță - valoarea pentru această parte este setată "0". Îmi place mai mult această opțiune, deoarece este mai compactă, dar în întreprinderile mele am folosit exact prima opțiune.

Acest tip de indentare este potrivit pentru divizarea textului, a conținutului tabelelor și a altor informații despre text. Pentru a separa elementele în sine asemănătoare cu faptul că, în exemplul de mai sus, există o altă proprietate.

Liniuță externă cu ajutorul proprietăților CSS "Margin"

Caracteristică distinctivă a proprietății " margine."- Aceasta este adăugarea unei liniuțe în afara elementului, adică externă.

Opțiunile pentru adăugarea de aici sunt, de asemenea, două.

Primul - cu o indicație clară a părților:

Margin-top: 10px; // liniuță externă 10px de la marginea de mai sus: 10px; // liniuță externă 10px pe partea dreaptă a marginii-fund: 10px; // liniuță externă 10px de la marginea de mai jos: 10px; // liniuță externă 10px stânga

Al doilea - cu listarea valorilor, fiecare dintre acestea corespunde părții sale:

Marja: 10px 0 0 0; // liniuță externă 10px de mai sus, totul - marja 0px: 10px 0; // liniuță externă 10px pe partea superioară și inferioară și pe laturi - margine 0px: 0 10px; // liniuță externă 0px de sus și în jos și pe laturi - 10px

Aici, nu voi descrie toate nuanțele de a lucra cu regulile, totul este același cu privire la proprietate padding."Este scris mai sus.

Utilizați marja cu următoarea valoare:

Test_div (lățime: 250px; Border: 1px solid; margine: 10px; // liniuță externă 10px)

Vizual va arăta astfel:

După cum se poate observa din exemplu, în acest caz se adaugă o liniuță externă, separarea elementelor specificate între ele.

Caracteristică importantă: Dacă ați analizat cu atenție rezultatul, ar putea observa că liniștele adiacente din elementele nu sunt rezumate. Aceasta este, dacă primul element are o liniuță de fund extern, egală cu 10px, iar cea de-a doua este o liniuță superioară externă cu aceeași valoare, atunci distanța totală între ele va fi de asemenea 10px. Dacă 10 și respectiv 15, atunci totalul este de 15 ani.

Această opțiune de indent este adesea utilizată în text, și anume în proiectarea paragrafelor, precum și în elementele care au frontiere vizibile.

Dar ambele proprietăți nu se limitează la aceste elemente. Alegeți opțiunile pentru utilizarea dvs., am încercat doar să vă prezint fundația pentru ei.

Buna! Inițial, am vrut să împărțim acest articol pe 4 mici, dar apoi am crezut. Pentru ce? La urma urmei, este mai convenabil atunci când aceste informații sunt colectate într-un singur material.

Prin urmare, astăzi vom învăța cum să facem liniuța CSS în stânga și de la toate celelalte partide - pe dreapta, pe partea de sus și de jos. Ele pot fi făcute pentru imagini și texte. Acestea sunt două specii:

• Extern;
• Intern.

Pentru prima, este utilizată proprietatea cheie de marjă, pentru a doua umplutură. Pentru claritate, am făcut un exemplu mic pentru dvs. Pentru a fi vizibil, a fost convenabil să se facă distincția între spațiul intern și extern, adăugați o masă vizibilă. Privind ce sa întâmplat?

Indicații externe

Vorbindu-le în fișierul stilurilor CSS, va fi posibilă specificarea orientării blocului de informații pe pagină. De exemplu, a schimbat-o spre stânga și în jos. Să demonstrăm imediat cum va arăta.

În general, este posibil să se aplice următoarele opțiuni pentru setarea unor liniuțe.

Stânga (margine-stânga).

Dreapta (marjă-dreapta).

De sus (margine-top).

De jos (margine-fund).

Acum voi arăta o altă nuanță răcoroasă.

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ă liniștele sunt așezate în sensul acelor de ceasornic. Totul începe pe partea de sus și se termină în partea stângă.

Indicații interne

Procedura de acțiune aici este similară. Numai acum adăugați proprietăți noi nu pentru întreaga masă, ci pentru conținutul coloanelor.

Ne uităm la ceea ce sa întâmplat.

Prin analogie cu veniturile interne la CSS, extern poate fi prescris de codul abreviat sau de părțile separat.

Acestea au fost evidențiate. În cele din urmă, voi arăta cum puteți facilita cu ușurință anumite lucrări.

Indedente la nivelul etichetelor selectate

În cazurile care păreau mai sus, ele sunt stabilite pentru text și imagini în același timp. De fapt, puteți specifica distanța față de elementele la nivelul unei etichete specifice. Voi arăta cum funcționează. Anulează cele mai recente modificări și indică un cod special în fișierul stil.

Privind ceea ce sa întâmplat după salvarea schimbărilor.

Imaginea a rămas în vigoare, doar textul încheiat în stânga a fost mutat. Manipulările similare pot fi aplicate la alte blocuri, de exemplu, TR, interval.

Ca informații suplimentare, propun să familiarizeze publicația cu privire la sarcină. De asemenea, sunt descrise moduri destul de interesante. Poate fi utilă pentru formarea unui șir roșu în text sau alte acțiuni.

În plus, există un abonament la buletinul informativ gratuit pe adresele de e-mail. Pentru un abonament pe blog există o formă specială. Până la comunicare.