Schimbați umplutura și spațierea superioară în CSS. CSS de umplutură de sus: margini de umplutură de poziționare a conținutului div

Marginile și umplutura sunt stiluri foarte importante atunci când construiți o pagină HTML. Ele vă permit să poziționați mai precis elementele, să creați un cadru cu golurile necesare etc. Ambele stiluri sunt foarte asemănătoare și îndeplinesc funcții similare. Dar există încă diferențe.

Elementele pot fi imbricate sau amplasate unul lângă celălalt. Să ne uităm la următorul exemplu:

Avem două mese, lămâie și albastră, situate una sub cealaltă. Tabelele constau dintr-o celulă. Există un bloc roșu în prima celulă a tabelului. Folosind acest exemplu, să vedem cum funcționează marginile și indentările.

Câmpurile sunt stabilite după stil căptușeală. Acest stil se aplică doar elementelor container, care pot conține alte elemente. Stilul vă permite să setați marginea dintre marginile unui element și conținutul acestuia. Stil marginea vă permite să setați indentări de la un element la cele mai apropiate margini ale altui element. Marginile altui element pot fi marginile containerului părinte, precum și marginile paginii în sine.

Există mai multe moduri de a seta aceste stiluri. De exemplu, specificați direct dimensiunea tuturor marginilor sau indentărilor cu un argument într-o unitate de măsură (px, ex, em, pt, cm și așa mai departe):

marginea: 3px;

umplutură: 3px 5px;

primul va determina cantitatea de margini/indentări în partea de sus și de jos, al doilea - la stânga și la dreapta. Când se oferă trei argumente:

margine: 3px 5px 2px; prima este marginea/indentația din partea de sus, a doua este atât stânga cât și dreapta, a treia este în partea de jos. Cu patru argumente:, umplutură: 3px 5px 2px 6px;, marginea : 3px 5px 2px 6px ;, primul este marginea/spațiul de sus, al doilea este în dreapta, al treilea este în jos, al patrulea este în stânga. Este ușor de reținut: primul este de sus, apoi în sensul acelor de ceasornic. În plus, puteți seta separat marginile și umplutura pentru o anumită margine, folosind stilurile adecvate:, padding-top, umplutura-dreapta, captuseala-fund, padding-stânga margine-top

În figură, blocul roșu se află în interiorul celulei tabelului și adiacent marginilor acesteia, adică celula nu are margini. Să setăm marginile celulei folosind stilul:

Ca urmare, pagina se va schimba în următoarele:

Să ne uităm acum la indentări. Două mese sunt adiacente una de alta, dacă vrem să le depărtăm puțin, putem aplica indentări. Există două opțiuni aici: fie setați liniuța de jos a primului tabel, fie liniuța de sus a celui de-al doilea tabel. Să-l folosim pe al doilea:

Vă rugăm să rețineți că am setat indentarea în mod special pentru tabel, și nu pentru celula tabelului, așa cum este cazul câmpurilor. Iată rezultatul:

Apropo, în primul caz (decalajul dintre blocul roșu și limitele celulei părinte), același efect ar putea fi obținut prin setarea indentărilor blocului. În general, dacă ceva nu este clar, anunțați-ne în comentarii.

Codul HTML al paginii de testare:

Bun venit pe blogul meu. Css (Cascading Style Sheets) oferă o mulțime de opțiuni de personalizare aspect pagini web. Astăzi aș dori să vă arăt pe scurt cum să definiți în CSS umplutura din partea de sus sau pe orice altă parte pentru orice element.

Marja

Marja este setată folosind proprietatea margine. Cu ajutorul acestuia, puteți seta margini pe toate cele patru laturi simultan sau puteți utiliza alte proprietăți: margin-sus, margin-left, margin-right, margin-bottom, care vă permit să o faceți doar pe o singură parte.

Marja determină distanța la care marginea selectată a unui element va fi decalată față de alte elemente de pe pagină. De exemplu, intrarea:

P,div(
Marja de sus: 20px;
}

Aceasta înseamnă că toate blocurile și paragrafele vor fi indentate în partea de sus cu 20 de pixeli, adică marginea lor superioară va fi îndepărtată de elementele adiacente cu această distanță.

Marginile pot fi scrise pe fiecare parte folosind o singură proprietate de marjă, la care sunt scrise 4 valori pe rând:

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

Căptușeala va fi dată de la marginile de sus, dreapta, jos și respectiv stânga. Deoarece în acest caz sunt egale pe laturi opuse, am putea scrie și așa:

Div(
Marja: 20px 10px;
}

Prima valoare este marja din partea de sus și de jos, iar a doua este marja din laterale.

Indentare

Căptușeala interioară funcționează diferit - nu îndepărtează blocul de alte elemente, ci adaugă acel spațiu în interiorul elementului, îndepărtând conținutul blocului de marginile acestuia. Este convenabil. Unde ați văzut un site web în care textul începe în partea din stânga sus a ferestrei?

Nu am văzut asta, deoarece dezvoltatorii web folosesc întotdeauna indentări externe și interne pentru a face textul cât mai ușor de citit. Umplutura internă este specificată folosind proprietatea padding, în care pot fi enumerate 4 valori deodată, separate printr-un spațiu, pentru toate marginile, respectiv.

De asemenea, similar cu marginea, puteți adăuga numele părții și puteți seta distanța doar pentru aceasta. De exemplu, top padding poate fi scris folosind padding-top . În general, proprietatea de umplutură funcționează exact la fel ca proprietatea marjă.

De exemplu, puteți da această bucată de cod:

Bloc(
Latime: 200px;
Umplutură: 20px;
}

Care crezi că va fi lățimea reală a elementului nostru? Aici puteți vedea că este de 200 de pixeli, dar căptușelele adaugă încă 20 pe fiecare parte, pentru un total de 240 de pixeli. Luați în considerare acest lucru atunci când proiectați.

Aș dori, de asemenea, să remarc că umplutura este dată în mod normal doar pentru elementele bloc, este mai bine să nu o dați elementelor inline. Marja funcționează bine cu orice element.

Bună ziua, dragi cititori ai blogului! Astăzi vom continua să învățăm despre foile de stil în cascadă sau CSS. În articolele anterioare, am examinat deja în termeni generali aspectul bloc al site-ului. Drept urmare, am început să avem pagini web destul de profesionale, dar le lipsea ceva. Dar, cel mai probabil, le lipsesc indentări și rame. Astăzi ne vom uita la regulile de stil de margine, padding și chenar, care vă permit să setați indentări și cadre pentru elementele html.

Opțiuni de umplutură CSS

Cu ajutorul foilor de stil în cascadă, este posibil să setați două tipuri de indentări.

1.Indentare este distanța de la granița imaginară a elementului până la conținutul său. Valoarea distanței este specificată cu ajutorul parametrului căptușeală. Această indentare aparține elementului însuși și se află în interiorul acestuia.

2. Marja— distanța dintre marginea elementului curent al paginii web și marginile elementelor învecinate sau elementul părinte. Mărimea distanței este controlată de proprietate marginea. Această indentare este situată în afara elementului.

Pentru claritate, poza:

De exemplu, luați în considerare o celulă plină cu text. Apoi padding-ul este distanța dintre chenarul imaginar al celulei și textul pe care îl conține. Și marginea exterioară este distanța dintre marginile celulelor adiacente. Să începem cu căptușeală.

Umplutură în CSS folosind padding (sus, jos, stânga, dreapta)

Proprietățile stilului padding-left, padding-top, padding-right și padding-bottom vă permit să setați valorile padding-ului, respectiv, în stânga, sus, dreapta și jos a unui element de pagină web:

padding-top | padding-dreapta | captuseala-fund | padding-left: valoare | interes | moşteni

Cantitatea de indentare poate fi specificată în pixeli (px), procent (%) sau alte unități acceptabile pentru CSS. La specificarea procentelor, valoarea este calculată din lățimea elementului. Valoarea de moștenire indică faptul că este moștenită de la părinte.

De exemplu, pentru paragraful curent, am aplicat o regulă de stil care setează umplutura din stânga la 20 de pixeli, umplutura de sus la 5 pixeli, umplutura din dreapta la 35 de pixeli și umplutura de jos la 10 pixeli. Intrarea regulii va arăta astfel:

p.test(
padding-stânga:20px;
padding-top:5px;
padding-dreapta:35px;
padding-bottom:10px
}

Regula de umplutură compozită vă permite să specificați indentări pe toate părțile unui element de pagină web simultan:

umplutura:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

O regulă prefabricată permite utilizarea uneia, două, trei sau patru valori, separate printr-un spațiu. În acest caz, efectul depinde de numărul de valori:

• dacă specificați o valoare, aceasta va seta cantitatea de indentare pe toate părțile elementului de pagină;
• dacă specificați două valori, prima va seta cantitatea de indentare în partea de sus și de jos, iar a doua - la stânga și la dreapta;
• dacă specificați trei valori, atunci prima va determina cantitatea de indentare în partea de sus, a doua - în stânga și în dreapta, iar a treia - în partea de jos;
• dacă sunt specificate patru valori, prima va seta cantitatea de indentare în partea de sus, a doua la dreapta, a treia în partea de jos și a patra la stânga.

Astfel, regula CSS de mai sus poate fi scurtată cât mai mult posibil și scrisă după cum urmează:

p.test( umplutură: 5px 35px 10px 20px)

Proprietatea sau marjele în CSS

Atributele stilului margin-left, margin-top, margin-right și margin-bottom vă permit să setați valorile marginii, respectiv stânga, sus, dreapta și jos:

margine-top | margine-dreapta | margine-jos | margine-stânga:<значение>|auto|moştenire

După cum sa menționat mai sus, marginea este distanța de la marginea elementului curent până la marginea elementului adiacent sau, dacă nu există elemente învecinate, până la marginea internă a containerului părinte.

Cantitatea de indentare poate fi specificată în pixeli (px), procent (%) sau alte unități permise pentru CSS:

p(
margine-stânga: 20px;
}
h1(
marja-dreapta:15%;
}

Valoarea auto înseamnă că dimensiunea indentării va fi calculată automat de browser. Dacă utilizați notația procentuală, indentările sunt calculate în funcție de lățimea containerului părinte. Mai mult, acest lucru se aplică nu numai pentru margine-stânga și margine-dreapta, ci și pentru margine-sus și margine-jos, marjele procentuale vor fi calculate în funcție de lățimea, nu de înălțime, a containerului.

Este permisă utilizarea ca valori ale indentărilor externe valori negative:

p(
margine-stânga:-20px;
}

Dacă cu valori de indentare pozitive elemente adiacente sunt îndepărtate, apoi cu o valoare negativă blocul vecin se va ciocni cu elementul pentru care am setat un astfel de offset negativ.

De asemenea, putem specifica umplutura folosind atributul style marginea. Setează valorile de indentare simultan pe toate părțile unui element de pagină web:

marja:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Când se specifică una, două, trei sau patru valori de umplutură, această proprietate respectă aceleași legi ca și regula de umplutură.

Opțiuni de chenar folosind proprietatea Border

La setarea cadrelor, există trei tipuri de parametri:

• border-width — grosimea chenarului;
• border-color — culoarea chenarului;
• border-style — tipul de linie cu care va fi desenat cadrul.

Să începem cu parametrul de grosime a cadrului:

border-width: [valoare | subțire | mediu | gros] (1,4) | moşteni

Grosimea ramei poate fi specificat în pixeli sau în alte unități disponibile în CSS. Variabilele subțire, mediu și gros setează grosimea marginii la 2, 4 și, respectiv, 6 pixeli:

lățime margine: medie;

Ca și în cazul proprietăților de umplutură și margine, parametrul border-width permite una, două, trei sau patru valori, setând astfel lățimea chenarului pentru toate părțile simultan sau pentru fiecare parte separat:

lățime chenar: 5px 3px 5px 3px

Pentru paragraful curent, faceți grosimea marginii de sus 1px, dreapta 2px, jos 3px și stânga 4px folosind regula (border-width: 1px 2px 3px 4px;)

Folosind atributele de stil border-left-width, border-top-width, border-right-width și border-bottom-width, puteți seta grosimea laturilor din stânga, sus, dreapta și, respectiv, de jos ale chenarului:

border-left-width|border-sus-width|border-right-width|border-bottom-width: subțire|mediu|gros|<толщина>|moştenire

Următorul parametru este culoarea marginii cu care puteți controla culoarea cadrului:

culoare-chenar: [culoare | transparent] (1,4) | moşteni

Proprietatea vă permite să setați culoarea chenarului pentru toate părțile elementului simultan sau numai pentru cele specificate. Ca valoare, puteți folosi metodele de specificare a culorilor acceptate în HTML: cod hexazecimal, cuvinte cheie etc.:

p (lățimea chenarului: 2px; culoarea chenarului: roșu)

transparent setează culoarea chenarului transparent și moștenește valoarea părintelui. În mod implicit, dacă nu este specificată culoarea chenarului, va fi folosită cea folosită pentru fontul din interiorul elementului dat.

Folosind atributele de stil border-left-color, border-top-color, border-right-color și border-bottom-color, puteți seta culoarea părților din stânga, sus, dreapta și, respectiv, de jos ale chenarului:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent|<цвет>|moştenire

ŞI ultimul parametru stilul de chenar specifică tipul de cadru:

stil de chenar: (1,4) | moşteni

Tipul de cadru poate fi specificat pentru toate laturile unui element simultan sau numai pentru cele specificate. Puteți utiliza mai multe cuvinte cheie ca valori. Aspectul va depinde de browserul utilizat și de grosimea cadrului. Sens nici unul este utilizat în mod implicit și nu afișează un cadru, iar grosimea acestuia este setată la zero. Valoarea ascunsă are același efect. Cadrul rezultat pentru alte valori, în funcție de grosime, este prezentat în tabelul de mai jos:

Atributele stilului border-left-style, border-top-style, border-right-style și border-bottom-style specifică stilul liniilor care vor fi desenate pe părțile din stânga, sus, dreapta și jos ale cadrului, respectiv:

border-left-style|border-top-style|border-right-style|border-bottom-style: niciunul|ascuns|punctat|liniat|solid|dublu|canelură|cresta|inserție|început|moștenire

Ca și în cazul opțiunilor de umplutură și umplutură, există proprietate generică de frontieră. Vă permite să setați simultan grosimea, stilul și culoarea chenarului în jurul unui element:

hotar: | moşteni

Valorile pot fi în orice ordine, separate prin spații:

td (chenar: 1px galben solid)

Pentru a seta un chenar numai pe anumite laturi ale unui element, există proprietățile margine-sus, chenar-jos, chenar-stânga, chenar-dreapta, care vă permit să setați parametrii pentru partea de sus, jos, stânga și partea dreaptă cadru

Rămâne doar să rezumam:

• pentru sarcina căptușeală folosim proprietatea căptușeală;
• a configura marginile exista o regula marginea;
• parametrii cadrului sunt specificate folosind atributul frontieră.

Observ că toate acestea proprietăți css măriți dimensiunea unui element de pagină web. Prin urmare, dacă modificăm grosimea chenarului sau dimensiunea căptușelii containerelor bloc care formează designul paginii web, va trebui să modificăm dimensiunile acestor containere în mod corespunzător, altfel se pot muta și designul va fi spart.

Atât, ne vedem data viitoare!

Astăzi vă vom vorbi puțin despre principiile aspectului, și anume despre modalitățile de organizare a indentării pe site-ul dvs. pentru anumite elemente.

Elementul în cauză care trebuie indentat ar putea fi text, o imagine, un tabel sau orice alt element HTML. Principalul lucru este să respectați câteva reguli importante, despre care vă voi spune acum.

Dacă tocmai vă creați site-ul, atunci vă recomand să introduceți următoarele proprietăți în partea de sus a fișierului de stil principal:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) *:înainte, *:după ( -webkit-box-sizing: border- -moz-box-sizing: border-box;

De ce este necesar acest lucru, vă întrebați? Îți răspund la întrebare cu un exemplu clar.

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

Iată cum va arăta opțiunea fără a utiliza proprietățile descrise mai sus (elementul de sus) și cu utilizarea lor (elementul de jos):

Ce poți vedea aici? Că lățimea elementului în prima versiune (fără a folosi proprietăți) a devenit mai mare decât cea specificată din cauza indentărilor adăugate, ceea ce nu este în întregime convenabil și corect în ceea ce privește aspectul.

Opțiunea cu proprietăți este mult mai plăcută din punct de vedere estetic, dar ar trebui să o folosiți în mod conștient, pentru că atunci când le adăugați pe un site gata făcut, riscați să obțineți un design prost și o „durere de cap” sub forma de a aduce totul în forma corectă. . Toate proiectele pe care am avut ocazia să le conduc de la zero nu au fost lipsite de aceste proprietăți.

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

Umplutură folosind proprietatea „padding” CSS

Pentru a înțelege întreaga logică a lucrurilor, să luăm ca exemplu următorul fragment al aspectului:

cu propriile tale stiluri:

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

Versiunea vizuală arată astfel:

Care este proprietatea" căptușeală"? Ajută la organizarea indentării interne în elementele specificate. Să adăugăm o umplutură internă de 10px la aspectul nostru:

Test_div ( lățime: 250 px; chenar: 1 px solid; padding: 10 px; // Padding 10 px )

Vizual arată așa:

Numărul 10 din proprietate înseamnă că în interiorul elementelor specificate, pe fiecare dintre cele patru laturi ale acestora, trebuie să adăugați o marjă de 10px. Pixelii (px) pot fi înlocuiți cu procente sau alte valori acceptate CSS.

Există două opțiuni indicaţiile laturilor din care trebuie făcute indentări.

Primul- aceasta este cu indicarea explicită a părților:

Umplutură-top: 10px; // 10px umplutură sus-dreapta: 10px; // 10px padding pe dreapta padding-bottom: 10px; // Căptușeală internă 10px din partea de jos padding-stânga: 10px; // Umplutură stângă de 10 px

În acest caz, fiecare parte își folosește propria proprietate. ŞI doilea:

Umplutură: 10px 0 0 0; // Umplutură internă 10px deasupra, totul altceva - 0px padding: 10px 0; // Umplutură internă 10px sus și jos, iar pe laterale - 0px padding: 0 10px; // Umplutură internă 0px sus și jos și 10px pe laterale

Iată o listă simplă de valori, fiecare dintre ele corespunde laturii sale. Laturile sunt așezate așa: prima valoare este sus, a doua este dreapta, a treia este jos și a patra este stânga, adică totul este în sensul acelor de ceasornic.

Dacă există două valori (sus și dreapta), atunci asta înseamnă că în oglindă aceleași valori merg în jos și în stânga, și asta este singura cale. Totul pare a fi clar. Dacă nu trebuie să setați o indentare pentru una dintre laturi, setați valoarea pentru această latură la „0”. Îmi place mai mult această opțiune, deoarece este mai compactă, dar în demersurile mele am folosit prima variantă.

Acest tip de indentare este bun pentru separarea textului, a conținutului celulei tabelului etc. informații text. Pentru a separa elementele în sine, similare cu cele din exemplul de mai sus, există o altă proprietate.

Marja folosind proprietatea CSS „margină”

Caracteristica distinctivă a proprietății " marginea" înseamnă că indentarea este adăugată în afara elementului, adică extern.

Există, de asemenea, două opțiuni pentru a adăuga aici.

Primul– cu indicarea explicită a părții:

Marja de sus: 10px; // Marja de 10px pe marginea sus-dreapta: 10px; // Marja de 10px pe marginea dreaptă-jos: 10px; // Marja exterioară 10px de la marginea inferioară-stânga: 10px; // Marja stângă de 10 px

Doilea– cu o listă de valori, fiecare dintre ele corespunzând laturii sale:

Marja: 10px 0 0 0; // Marja exterioară 10px deasupra, totul în rest - 0px margin: 10px 0; // Marja 10px sus și jos, iar pe laterale - 0px margin: 0 10px; // Umplutură exterioară 0px sus și jos și 10px pe laterale

Nu voi descrie aici toate nuanțele de lucru cu regulile, totul este la fel ca despre proprietate " căptușeală", scris despre el mai sus.

Folosim marja cu următoarea valoare:

Test_div ( lățime: 250px; chenar: 1px solid; margine: 10px; // Marja 10px )

Vizual va arăta astfel:

După cum se poate vedea din exemplu, în acest caz, se adaugă o marjă externă pentru a separa elementele specificate.

Caracteristică importantă: Dacă te-ai uitat atent la rezultat, s-ar putea să fi observat că indentările adiacente ale elementelor nu se adună. Adică, dacă primul element are o marjă inferioară de 10px, iar al doilea element are o marjă superioară de aceeași valoare, atunci distanța totală dintre ele va fi și ea de 10px. Dacă 10 și, respectiv, 15, atunci totalul este 15 și așa mai departe.

Această opțiune de indentare este adesea folosită în text, și anume în proiectarea paragrafelor, precum și în elementele care au margini vizibile.

Dar ambele proprietăți nu se limitează doar la aceste elemente. Opțiunile de utilizare le alegi singur, am încercat doar să-ți ofer elementele de bază despre ele.

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.