Indiferent daca o eticheta este de sine statatoare sau imbricata in alte etichete, aceasta poate fi tratata ca un element distinct pe ecran si poate fi controlata prin intermediul CSS.
Orice element creat intr-o foaie de stil este prezentat in propriul lui cadru.
Notiunea de element se refera la componentele unui document HTML, configurate prin intermediul etichetelor HTML.
Caseta (cadrul elementului) dispune de numeroase proprietati, intre care se numara: marginile, chenarul, completarea (umplerea, cunoscuta ca "padding"), latimea si inaltimea, care pot fi modificate cu ajutorul CSS.
Elementele HTML au patru laturi (sus, dreapta, jos si stanga) la care se pot aplica proprietatile CSS specifice, restul proprietatilor CSS (font, text, culoare, fundal) se aplica in continutului casetei. Continutul poate include texte, liste, formulare sau imagini.

1. Latimea si inaltimea unui element

Latimea si inaltimea elementelor pot fi specificate cu ajutorul proprietatilor width si height.
In mod prestabilit acestea sunt determinate automat de catre navigator, fiind egale cu necesarul afisarii intregului continut. Pentru definirea latimii si inaltimii se folosesc urmatoarele tipuri de valori:

- o valoare de tip numeric, de obicei in pixeli;
- un procent, care stabileste o valoare proportionala in functie de cea a elementului parinte;
- valoarea auto, care foloseste latimea si inaltimea calculata de navigator, si care reprezinta cantitatea de spatiu maxim pe care o poate ocupa elementul pentru afisarea intregului continut.

Sintaxa generala pentru configurarea latimii si inaltimii este:

selector { width:valoare; height:valoare }

Iata un exemplu in care elementul cu id="un_id" va avea latimea de 300 pixeli si inaltimea de 500 pixeli:

#un_id { width:300px; height:500px; }

2. Marginile unui element

Proprietatea margin permite stabilirea distantei dintre un element si alte elemente alaturate, prin specificarea unei valor pentru marginea din fiecare latura (sus, dreapta, jos, stanga).
Daca specificati cele 4 valori in aceeasi definitie, acestea reprezinta marginile elementului in urmatoarea ordine: sus, dreapta, jos, stanga.
Daca specificati doar o valoare, aceasta va fi aplicata tuturor marginilor.
In cazu in care specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile marginilor opuse.
Sintaxa generala pentru configurarea marginilor unui selector este:

selector { margin:valoare/valori; }

Tipul de valoare folosit poate avea urmatoarele optiuni:

- o valoare de tip lungime (numerica) – care poate fi si negativa;
- o valoare procentuala (procent) – creaza o margine proportionala cu latimea elementului parinte;
- valoarea auto – lasa controlul marginilor la decizia navigatorului.

Iata un exemplu in care etichetele DIV vor avea distanta pentru marginea de sus 10 pixeli, dreapta 5 pixeli, jos 8 pixeli si in stanga 15 pixeli:

div { margin:10px 5px 8px 15px; }

Exista posibilitatea de a stabili valoarea marginii doar pentru o singura latura, fara a tine cont de celelalte margini. Pentru aceasta sunt folosite proprietatile margin-top, margin-bottom, margin-left si margin-right cu aceleasi valori ca si in cazul proprietatii margin, dupa cum puteti vedea mai jos.

selector { margin-top:valoare; }
selector { margin-bottom:valoare; }
selector { margin-left:valoare; }
selector { margin-right:valoare; }

3. Chenarul unui element

Proprietatea border permite stabilirea simultana a atributelor chenarului pentru toate cele patru laturi ale casetei. Aceasta foloseste 3 valori distincte, pentru a configura latimea (grosimea), stilul si culoarea liniei bordurii.
Sintaxa generala pentru definirea chenarului este:

selector { border:val_grosime val_stil val_culoare; }

Unde

- prima valoare (val_grosime) reprezinta grosimea chenarului si poate fi una din urmatoarele tipuri:
- - o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului);
  - un cuvant cheie (thin, medium, thick) care caracterizeaza o dimensiune relativa.
- a doua valoare (val_stil) reprezinta numele stilului atribuit chenarului (valoarea "none" anuleaza afisarea chenarului);
- ultima valoare (val_culoare) reprezinta culoarea, exprimata in cod hexa sau valoare RGB.

Iata un exemplu in care div-urile vor avea o bordura groasa de 1 pixel, solid si culoare albastra:

div { border:1px solid blue; }

- Pot fi folosite si proprietati separate pentru fiecare: "border-width", "border-style" si "border-color"; prezentate in continuare.

Un atribut care poate fi folosit in configurarea chenarului este border-width, acesta furnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din jurul unei casete.
Sintaxa generala este:

selector { border-width:valoare; }

Daca specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga.
Daca specificati doar o valoare, ea va fi aplicata tuturor marginilor.
Daca folositi doua sau trei valori, valorile care lipsesc sunt copiate din valorile marginilor opuse lor in caseta.

Aspectul bordurii poate fi stabilit prin atributul border-style; stilul este aplicat celor patru margini si este definit astfel:

selector { border-style:valoare; }

Pentru specificarea valorii, pot fi folosite urmatoarele tipuri:
CSS borders

Ultimele patru valori sunt reprezentate tridimensional, iar in cazul in care ele nu sunt acceptate de catre navigator, in locul lor se va folosi valoarea cu linie plina.

Un alt atribut care poate fi utilizat in configurarea chenarului este border-color, acesta stabileste culoarea pentru toate cele patru laturi ale chenarului si foloseste pentru valoarea ei un singur cuvant cheie exprimat in cod hexa, valoare RGB sau numele culorii.
Sintaxa generala este:

selector { border-color:valoare; }

Puteti stabili culoarea fiecarei margini si separat, folosind proprietatile:

border-top-color, border-right-color, border-bottom-color si border-left-color

Fiecare latura a chenarului poate avea valori configurate in mod separat (prin care se stabilesc stilul si culoarea fiecarei borduri din jurul elementului) dupa cum este prezentat mai jos:

selector { border-top:grosime stil culoare; }
selector { border-bottom:grosime stil culoare; }
selector { border-left:grosime stil culoare; }
selector { border-right:grosime stil culoare; }

4. Adaugarea spatiului in interior, in jurul elementului

Proprietatea padding adauga o cantitate de spatiu suplimentar in jurul continutului elementului, in interiorul chenarului, intre bordura si continut.
Forma generala pentru utilizarea acestei proprietati este:

selector { padding: valoare/valori; }

Valoarea pentru completarea spatiului poate fi una din urmatoarele:

- o valoare de tip lungime
- o valoare procentuala – creaza umplerea in raport cu latimea elementului parinte.

Cand specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga.
Daca specificati doar o valoare, aceasta va fi aplicata tuturor celor patru directii.
Daca specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile laturilor opuse.
Iata un exemplu in care etichetele DIV vor avea distanta padding: sus 4 pixeli, dreapta 2 pixeli, jos 3 pixeli si in stanga 2 pixeli:

div { padding:4px 2px 3px 2px; }

Fiecare latura a chenarului poate avea proprietatea padding configurata separat:

selector { padding-top:valoare; }
selector { padding-bottom:valoare; }
selector { padding-left:valoare; }
selector { pading-right:valoare; }

5. Elemente float

CSS ofera posibilitatea de a "infasura" anumite elemente in jurul altora. Acest lucru se face prin intermediul proprietatii float, care determina o mutare fortata a elementului in directia data de valoarea mentionata, lasand loc liber in spatiul opus directiei, care va fi ocupat de urmatorul element din codul HTML.
Sintaxa generala pentru utilizarea acestei proprietati este:

selector { float:valoare; }

Unde "vaoare" poate fi" left, right si none
Valoarea "none" permite elementului sa fie plasat acolo unde este posibil, iar celelalte valori forteaza plasarea elementului in stanga sau in dreapta ecranului, textul din exteriorul etichetei HTML respective va fi plasat in partea opusa, in jurul elementului.
Iata un exemplu in care elementul cu id="un_id" va fi fortat sa fie pozitionat in dreapta celorlaltor elemente:

#un_id { float:right; }

6. Anularea plasarii unui element in spatiul eliberat de "float"

Asemanator cu actiunea etichetei HTML <br>, care trece pe un nou rand elementele ce o preced, este si proprietatea clear.
Cu ajutorul acesteia se poate anula ocuparea unui spatiu care a fost lasat liber de un element care utilizeaza proprietatea "float".
Sintaxa generala pentru utilizarea proprietati clear:

selector { clear:valoare; }

Unde "valoare" specifica latura in jurul careia este interzisa infasurarea textului si poate lua valoarea: left, right sau both. Se poate folosi si valoarea "none", ceea ce are ca efect anularea altor atribute ale proprietatii clear.
De exemplu, daca aveti un DIV pozitionat fortat in dreapta, un paragraful care urmeaza dupa el va fi afisat in stanga DIV-ului respectiv. Pentru a anula acest lucru, ca paragraful sa fie afisat sub DIV, se foloseste proprietatea "clear", precum in exemplul urmator:

#un_div { float:right; }
p { clear:both; }

7. Afisarea si ascunderea elementelor

Proprietatea display poate stabili daca un element va fi de tip block, incluzand linii noi deasupra si dedesubtul sau, daca este inclus in linie, daca este tratat sub forma de lista sau daca elementul este afisat sau nu.
Sintaxa generala pentru aceasta proprietate este:

selector { display:valoare; }

Unde "valoare" poate fi una din urmatoarele optiuni:

list-item – plaseaza in prima linie a textului un indicator pentru articole de tip lista, dar si un salt deasupra si dedesubtul articolului;
block – defineste eticheta ca fiind de tip bloc si plaseaza un salt la linie noua deasupra si dedesubtul ei;
inline – defineste eticheta ca o eticheta in linie si elimina caracterele de salt la linie noua;
none – determina ascunderea elementului si neafisarea lui de catre navigator; codul acestuia este incarcat insa continutul sau nu e afisat in pagina.

Iata un exemplu in care elementele <li> sunt asezate in linie, iar un element cu id="un_id" va fi ascuns in pagina:

li { display:inline; }
#un_id { display:none; }

Proprietatea display nu trebuie confundata cu visibility. Spre deosebire de visibility care nu afiseaza elementul dar lasa liber spatiu pentru element, sintaxa display: none elimina complet elementul din pagina.