Eticheta adaugă o umplutură în centrul de sus. Schimbați umplutura și spațierea superioară în CSS

Buna ziua! Inițial am vrut să împart acest articol în 4 mici, dar apoi m-am gândit la el. Pentru ce? La urma urmei, este mai convenabil atunci când astfel de informații sunt colectate într-un singur material.

Așa că astăzi vom învăța cum să facem Indentare CSSîn stânga și pe toate celelalte părți - în dreapta, deasupra și dedesubt. Ele pot fi realizate pentru imagini și texte. Ele vin în două tipuri:

• Extern;
• Intern.

Pentru prima, proprietatea cheie este marginea, pentru cea din urmă – padding. Pentru claritate, ți-am făcut un mic exemplu. Pentru a face o distincție vizuală convenabilă între spațiul interior și cel exterior, am adăugat o masă vizibilă. Să vedem ce s-a întâmplat?

Marjele

Scriindu-le într-un fișier de stil CSS, puteți seta orientarea blocului de informații pe pagină. De exemplu, îl voi muta la stânga și în jos. Permiteți-mi să vă demonstrez imediat cum va arăta.

În general, puteți utiliza următoarele opțiuni pentru a seta indentări.

Stânga (marja-stânga).

Pe dreapta (marja-dreapta).

De sus (margine-sus).

De jos (marja-de jos).

Acum vă voi arăta o altă nuanță grozavă.

După cum puteți vedea, puteți utiliza una dintre opțiuni - efectul este același. Numai în al doilea caz codul se dovedește a fi mai compact. De asemenea, rețineți că indentările sunt setate în sensul acelor de ceasornic. Totul începe de sus și se termină în stânga.

Captuseala

Procedura este similară aici. Abia acum voi adăuga noi proprietăți nu pentru întregul tabel, ci pentru conținutul coloanelor.

Să vedem ce a ieșit din asta.

Prin analogie cu marginile interne în CSS, cele externe pot fi scrise în cod prescurtat sau pentru laturi separat.

Acestea au fost punctele principale. În cele din urmă, vă voi arăta cum altfel puteți face ceva mai ușor.

Indentare la nivelul etichetei selectate

În cazurile văzute 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 anumite etichete. Îți voi arăta cum funcționează. Anulez ultimele modificări și specific codul special în fișierul de stil.

Să aruncăm o privire la ce s-a întâmplat după salvarea modificărilor.

Imaginea a rămas pe loc, doar textul inclus în . Manipulari similare pot fi aplicate altor blocuri, de exemplu, tr, span.

Ca Informații suplimentare Vă sugerez să citiți publicația despre sarcină. Există, de asemenea, suficient descrise moduri interesante. Poate fi util pentru formarea unei linii roșii în text sau pentru efectuarea altor acțiuni.

În plus, vă puteți abona la un buletin informativ gratuit pe adrese de e-mail. Există un formular special pentru abonarea la blog. Ne vedem mai târziu.

O resursă web este evaluată de utilizatori în funcție de atractivitatea sa vizuală. Prin urmare, chiar și un text util din punct de vedere informațional poate să nu fie citit din cauza faptului că este prost conceput. Concluzie - trebuie să abordați cu atenție și 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 de a crea articole atractive. Una dintre proprietățile concepute pentru a face scrisul mai ușor de citit este indentarea textului CSS.

Margini și umplutură: care este diferența?

Înainte de a începe formatarea textului, ar trebui să înțelegeți ce sunt marginile ș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 specificat de proprietate căptușeală, liniuță - marginea;
• marja este determinată de decalajul dintre conținut și marginea blocului, indentarea - dintre marginile blocurilor adiacente;
• marginile pot fi luate în considerare sau nu în dimensiunile elementului (lățime și înălțime).

proprietatea marjei

Deci, pentru a seta indentarea orizontală sau verticală a textului CSS, utilizați constructul marginea. Această proprietate se aplică etichetei definirea paragrafului documentului. În chiar caz simplu este scris ca:

marja: 12px.

Această linie înseamnă că în jurul blocului de text (sau a oricărui alt bloc) va exista o indentație de 12 pixeli pe toate părțile. Pentru a mări intervalul, de exemplu, de trei ori, scrieți:

marja: 36px.

Dar dacă intervalul dintre blocuri ar trebui să fie diferit pe fiecare parte? Dezvoltatorii de pagini web folosesc mai multe forme de înregistrare:

1. marjă: 11px 22px.
2. marjă: 11px 22px 33px.
3. marjă: 11px 22px 33px 44px.

În primul exemplu, 11 pixeli vor fi indentați de la marginile de jos și de sus ale blocului și 22 de pixeli pe părțile laterale ale blocului. Conform celei de-a doua forme de înregistrare, vor exista 11 pixeli între marginea superioară a blocului și conținut, 33 pixeli între partea de jos și 22 pixeli pe părțile laterale. În al treilea caz, umplutura va fi de 11 pixeli în partea de sus, 22 pixeli în dreapta, 33 pixeli în partea de jos și 44 pixeli în stânga.

De asemenea, este posibil să înregistrați distanța până la limita blocului pe o singură parte: margine-sus, margine-jos, margine-stânga, margine-dreapta. Prin traducerea numelor proprietăților în rusă, este ușor să le ghiciți scopul. De exemplu, următoarea intrare spune că marginea dreaptă va fi de 22 de pixeli:

margine-dreapta: 22px.

Pentru celelalte părți, distanțele din jurul blocului sunt presupuse a fi egale cu valoarea elementului părinte.

Proprietate marginea are o caracteristică de care un dezvoltator trebuie să țină cont atunci când folosește indentarea verticală a textului CSS. Intervale elemente învecinate nu sunt rezumate, ci suprapuse una peste alta. De exemplu, lăsați unul dintre blocuri să aibă margine-jos: 15px, și blocul adiacent acestuia de mai jos margine-sus: 35px. Aritmetica școlară și bunul simț sugerează că spațiul total dintre ele va fi de 50 de pixeli. În practică, acesta nu este cazul. Bloc cu o valoare mare de proprietate margineaîși va „absorbi” vecinul. Ca urmare, distanța dintre elemente va fi de 35 de pixeli.

Linie „roșie”.

Întocmirea unui document în editor de text, utilizatorii preferă să specifice fiecare paragraf nou folosind o linie „roșie”. CU folosind CSS indentarea textului din stânga este ușor de făcut - construcția este folosită text-indentare. Este scris astfel:

indentare text: 11px.

Adică, prima linie a paragrafului va fi deplasată față de marginea din stânga cu 11 pixeli. Pentru a face textul de pe o pagină web mai mult ca un document în editor, ar trebui să setați suplimentar, adică să scrieți:

text-indent: 11px;

text-align: justifica.

Pe lângă pixeli, atunci când descrieți marcajele, este permisă utilizarea altor unități - inci, puncte, procente. Lăsați blocul să aibă o umplutură de text CSS de 10%. Cu o lățime a blocului de 500 de pixeli, linia roșie va fi de 50 de pixeli (10% din 500).

Această proprietate poate fi setată la moşteni. Această intrare spune că blocul folosește o proprietate similară a blocului părinte.

text-indent: moștenire.

În mod surprinzător, poate lua și valori negative! În acest caz, se formează așa-numitele protuberanțe, adică textul principal rămâne pe loc, iar prima linie este deplasată la stânga cu 22 de pixeli:

text-indent: -22px.

Pentru a preveni trecerea literelor dincolo de marginea stângă a browserului, în plus față de text-indentare trebuie să utilizați construcția pentru a seta câmpul:

umplutură-stânga: 22px.

Sunt revizuite principalele proprietăți ale CSS. Iar practica va ajuta la consolidarea lor. Iată câteva sfaturi finale pentru a aplica ceea ce ați învățat la dezvoltarea site-ului dvs.:

• linia roșie și indentarea textului sunt concepte diferite și sunt folosite diferite proprietăți pentru a le indica;
• Pentru inclinațiile verticale, regulile matematicii nu se aplică - intervalele se suprapun, elementul cu valoarea mai mare „câștigă”;
• negativ indentarea paragrafelor folosit pentru a indica primul rând al unui paragraf folosind o imagine.

Proprietatea determină cât spațiu de text orizontal ar trebui să fie înfășurat înainte de începutul primei linii a unui element de text. Distanța este calculată de la marginea de pornire a elementului și containerul pentru nivelul blocului.

Deoarece o mare parte din conținutul unei pagini web este sub formă de text, abilitatea de a stila acel text într-un mod care este atât atractiv, cât și eficient este o abilitate importantă pe care trebuie să o aveți pentru a deveni un web designer. Pentru a indenta o descriere și un paragraf, metoda cea mai frecvent utilizată și recomandată ar fi folosind CSS. Aici vi se va furniza diverse exemple despre modul în care CSS poate fi utilizat pentru text și elementul de indentare.

Setați marginea superioară folosind CSS

Pentru a crea indentări de top se folosește, apoi, desigur, fără Proprietăți CSS nu putem face asta, pentru că avem nevoie de margin-top, aceasta este o valoare care poate fi setată în moduri diferite, ca în px și standard în pixeli, em, % și așa mai departe, că totul se întâmplă în stil CSS în unități de măsurare.

Exemplu de utilizare:

Margin-bloc(
margine-sus: 50px;
}

Ce puteți vedea în imagine:

Îl poți folosi și pentru a arunca blocuri, aici poți folosi o proprietate numită margine-stânga Asemenea margine-dreaptaŞi margine-fond. Acolo unde pur și simplu indicăm proprietatea marjei, unde este posibil să setăm inițial 4 parametri pentru aceasta, aici vom lua în considerare sensul acelor de ceasornic pentru conceptul de unde începem din partea de sus cu continuarea sub fiecare dintre laturi.

marjă: 20px 50px 30px 50px;

Există, de asemenea, umplutură de top în CSS

Se întâmplă că trebuie să aliniați un element de conținut pe verticală, acesta este relativ la blocul părinte, aici este posibil să utilizați alte proprietăți, cum ar fi padding-top, care face sau mai degrabă setează padding-ul intern în sus în mod implicit. Dacă vorbim de proprietăți similare, care pot fi și ele scrise și setate într-un mod analog, aici avem margine în px, em, % și alte unități.

Exemplu:

Bloc de umplutură (
padding-top: 47px;
}

Acum putem considera un analog al proprietății margineaŞi căptușeală, care este folosit pentru a seta indentări pe alte părți ale elementului bloc, dar deja merge separat: padding-stânga, umplutura-dreapta, captuseala-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 marginea incepand dupa cum intelegi de sus, dar apoi totul merge in sensul acelor de ceasornic, acesta este in dreapta, dedesubt, in stanga, si asa mai departe.

Acum depinde de situatii diferite, aveți opțiunea de a indenta partea de sus Stiluri CSS, unde folosim proprietățile margineaŞi căptușeală că este posibil să plasați elementele necesare pe pagina resursei dvs. de internet, așa cum v-ați propus și trebuie să faceți.

Aspectul CSS a fost întotdeauna dreptunghiular. Orice linii netede sunt de competența dezvoltatorului. Regulile de stil oferă suficiente opțiuni pentru a da paginii o formă netedă în limitele rezoluției ecranului. Dar orice element de aspect este întotdeauna un dreptunghi în care aranjarea informațiilor este guvernată de regulile CSS.

Umplutura pe toate părțile este importantă pentru fiecare element de pagină atunci când este poziționat în mod absolut, iar umplutura superioară CSS este definită în mod specific, deoarece contează pentru diferite elemente, în special pentru cele inline.

Reguli de bază de poziționare

Un element bloc are o regulă de indentare din părțile laterale ale elementului pe care îl conține (marja), o regulă de indentare pentru elementele din interiorul acestuia (padding) și o lățime a marginii (chenar), care poate fi, de asemenea, utilizată.

Indentarea din partea de sus este de o importanță deosebită. CSS într-un bloc asociază regulile de umplutură cu reguli pentru elementele poziționate absolut și relativ în acel bloc.

O practică obișnuită pentru regulile CSS: puteți specifica aceeași umplutură pe toate părțile, în perechi sus/jos și dreapta/stânga, sau pentru fiecare parte separat. De exemplu,

• marja: 10px;
• umplutură: 10px20px;
• umplutură: 10px20px30px40px.

În primul caz, indentarea elementului de pe părțile laterale ale containerului exterior în care se află este stabilită. În al doilea caz, marginile din partea de sus și de jos sunt 10px, în stânga și în dreapta - 20px. În al treilea caz, dimensiunea indentărilor este indicată pe toate părțile: sus, dreapta, jos și stânga.

În toate aceste cazuri, indentarea CSS de sus este de 10 px.

Reguli care schimbă poziția elementelor

Dacă un element de aspect nu este poziționat în mod absolut, acesta este poziționat în ordinea generală de formare a paginii.

Dacă definim umplutură pe CSS de sus în elementul scCurrInfo, obiectivul va fi atins, dar dacă la nivelul li nu va fi.

În acest exemplu, folosind regula de umplutură: 40px; necesită o reducere adecvată a regulilor de lățime și înălțime cu 80px. ÎN altfel Dimensiunea blocului scCurrInfo va depăși limitele blocului exterior.

Dacă eliminăm regula de umplutură din descrierea scCurrInfo, dar o adăugăm cu o valoare de 20px la descrierea stilului articolului din listă, vom obține doar liniuță de sus. CSS nu va aplica această valoare altor părți.

Desigur, această utilizare a regulii de indentare se aplică fiecărui element li.

Practici generale de formatare a conținutului

Unii dezvoltatori ating perfecțiunea prin așezarea paginilor folosind elemente de bloc. Aparent, aceasta este o practică clasică - să începi cu tabele și să închei propriul proces educațional cu blocuri.

Libertatea inerentă amenajării blocurilor este fascinantă, iar imaginația dezvoltatorului poate să nu fie limitată de reguli stricte ale tabelului: numai rânduri, doar celule, îmbinând doar orizontal și vertical. Nimic specific ideilor relaționale.

Între timp, tabelele, pe lângă dezavantajele evidente, au multe avantaje calitative. La crearea padding-ului în partea de sus, CSS ține cont de padding-ul din stânga, dreapta (jos este un moment special). Regulile pentru celulele tabelului vă permit să controlați atât alinierea verticală, cât și orizontală. Folosind stiluri de rând și combinându-le cu stiluri de celule, puteți crea vizualizări complexe ale conținutului.

Reprezentarea obișnuită a unei pagini sub formă de dreptunghiuri nu împiedică deloc să fie prezentată sub forma unui tabel. Acestea sunt și dreptunghiuri, dar sunt și celule de tabel, adică au propriile reguli care completează regulile blocurilor.

Poziționare absolută

Bloc cu regula POZIȚIA: absolută ; va fi situat într-o locație determinată de coordonatele sale relativ la blocul în care se află.

O trăsătură caracteristică a regulilor CSS este că „practica este cel mai bun criteriu al adevărului” în majoritatea cazurilor, mai ales atunci când este necesară compatibilitatea între browsere și aspectul se face manual, este de preferat să studieze manuale cu drepturi depline pe foi de stil în cascadă.

Utilizarea tabelelor duce adesea la probleme de schimbare a conținutului celulei. Un decalaj similar în cadrul unui bloc nu afectează întotdeauna toate elementele. Experimentând, puteți obține rezultatul dorit. O sarcină banală: cum eliminarea umpluturii superioare nu este întotdeauna o soluție banală pentru CSS.

În unele cazuri, atunci când trebuie să așezați elemente de pagină în măruntaiele unui sistem popular de gestionare a conținutului site-ului web, trebuie să acordați atenție nu numai practicii experimentale, ci și să priviți experiența colegilor dvs.

Aspectul bloc este adesea folosit la crearea unui site web sau blog. Ca o consecință a acestui fapt, este adesea necesară indentarea blocurilor. Din acest motiv, aproximativ cum să indentați în CSS descrisă în detaliu în această lecție. Pentru browser, fiecare etichetă este un container care are conținut, umplutură, margini exterioare și o chenar. În această lecție vom învăța cum să facem indentări interne și externe și să luăm în considerare principalii lor parametri.

Figura de mai jos arată clar parametrii de indentare a blocului:

După cum puteți vedea, liniuțele pot fi făcute în patru direcții: liniuță de sus (sus), liniuță de jos (jos), liniuță din stânga (stânga) și liniuță din dreapta (dreapta). Unitățile de măsură pot fi pixeli, procente și alte unități CSS - aflați mai multe despre ele. Acest tutorial folosește pixeli.

Blocuri de umplutură

Proprietatea responsabilă pentru completarea în CSS este căptușeală. Deci, să ne uităm la un exemplu de setare a umpluturii interne pentru un bloc:

padding-top: 5px; /*padding-ul de sus*/ padding-left: 8px; /*padding stânga*/ padding-dreapta: 8px; /*padding dreapta*/ padding-bottom: 5px; /*umplutură inferioară*/

În acest exemplu, umplutura este setată separat pentru fiecare parte a blocului. În plus, există mai multe moduri de a seta indentarea în CSS:

margine: 5px 8px 5px 8px; /*margini sus, dreapta, jos, stânga*/ margine: 5px 8px 5px; /*descrie marginile de sus, stânga, dreapta, jos*/ margine: 5px 8px; /*descrie marginile de sus și de jos, din dreapta și din stânga*/ margine: 7px; /*descrie toate umpluturile interne de 7px*/

Este mai ușor să vă amintiți prima și ultima metodă. În primul caz, indentațiile sunt plasate în sensul acelor de ceasornic (sus, dreapta, jos, stânga) - putem specifica orice cantitate de indentare, în cel din urmă caz, indentările de pe toate părțile vor fi aceleași;

Blocați marginile

Proprietatea responsabilă pentru marjele în CSS este marginea. Exemple de marje în CSS:

margine-sus: 5px; /*margine de sus*/ margine-stânga: 10px; /*marginea din stânga*/ marginea-dreapta: 10px; /*margine din dreapta*/ margine-jos: 5px; /*marginea de jos*/

umplutură: 5px 10px 5px 10px; /*margini sus, dreapta, jos, stânga*/ padding: 5px 10px 5px; /*descrie umplutura de sus, stânga și dreapta, de jos*/ padding: 5px 10px; /*descrie umplutura de sus și de jos, dreapta și stânga*/ padding: 7px; /*descrie toate marginile de 7px*/

Astfel, cum să indentați în CSS- întrebarea nu este dificilă, dar foarte relevantă. Pentru a înțelege mai bine informațiile descrise mai sus, ar trebui să rețineți că există două proprietăți: padding - indentări interne și margine - indentări externe. De asemenea, după cum știți deja, există mai multe moduri de a seta indentări, le puteți utiliza.