Chenare Si Imagini

Fiecare element HTML
poate fi înţeles ca o casetă dreptunghiulara (box), iar toate cutiile
au aceeaşi structură: "width", "padding", "border" şi "margin".

marginea (margin) este spaţiul exterior chenarului până la celelalte elemente
chenarul (border) este o bordură care înconjoară elementul
completarea (padding) stabileşte distanţa dintre conţinut şi chenar
conţinutul include informaţia utilă (text, tabele, imagini, formulare, etc.)

Originea
elementului este considerat colţul din dreapta sus faţă de care se vor
raporta toate dimensiunile prezentate în continuare.

Domeniul de conţinut (width şi height)
Fiecare
element are o lăţime (width). Dacă aceasta nu a fost definită, în cazul
elementelor de tip block, box-ul este atât de lat cât trebuie să fie,
deci cât conţinutul box-ului. Lăţimea şi înălţimea unui element sunt
stabilite în HTML prin atributele width şi height. Aceste atribute pot
fi adăugate sau suprascrise prin comenzi CSS.

Exemplu: folosind comenzi CSS modificăm dimensiunile originale ale imaginii:

Cod:

Distanţa interioară (padding şi margin)
Între
conţinut şi marginea box-ului se află distanţa interioară (padding).
padding stabileşte distanţa dintre obiect şi chenar simultan pentru
toate laturile. De asemenea padding preia culoarea de fundal a
documentului conţinut. Distantele pot fi stabilite şi individual
folosind padding-top, padding-bottom, padding-left sau padding-right.

margin
stabileşte distanţa dintre chenar şi celelalte obiecte din pagină
simultan pentru toate laturile. Distanţele pot fi stabilite şi
individual folosind margin-top, margin-bottom, margin-left sau
margin-right.

Valorile pentru padding şi margin pot fi exprimate în: px (pixeli), in (inci), pt (puncte) sau cm (centimetri).

Exemplu: folosind comenzi CSS imaginea este poziţionată la 100px faţă de latura stângă şi 25px faţă de latura de sus:

Cod:

Marginea (border)
În
jurul "padding" se setează chenarul (border), care pentru toate patru
laturile poate avea o lăţime (width), culoare (color) şi style (tăiat,
punctat, liniat etc.) diferite. Netscape şi Internet Explorer afişează
diferit chenarele. Comanda CSS pentru definirea chenarului este border
având proprietăţile asociate width, style şi color. Pentru a fi siguri
că aceste proprietăţi funcţionează atât în Internet Explorer cât şi în
Netscape trebuie să declarăm pentru border cel puţin width şi style.

border-width - stabileşte grosimea chenarului şi poate fi exprimată în px (pixeli), pt (puncte), cm (centimetri) sau in (inci).
border-style - stabileşte tipul chenarului şi poate fi dotted, dashed, solid, double, groove, ridge, inset şi outset.
border-color - stabileşte culoarea chenarului şi poate fi exprimată prin valoare hexazecimala sau în cuvinte.

Exemplu: definim nouă clase utilizând proprietăţile border-width, border-style şi border-color:

Cod:

border-width: 2px; border-style: dotted; border-color: red; border-width: 3px; border-style: dashed; border-color: blue; border-width: 2px; border-style: solid; border-color: green; border-width: 3px; border-style: double; border-color: black; border-width: 2px; border-style: groove; border-color: silver; border-width: 3px; border-style: ridge; border-color: lime; border-width: 2px; border-style: inset; border-color: yellow; border-width: 3px; border-style: outset; border-color: aqua; border-width: 2px; border-style: hidden; border-color: olive;

Marginea exterioară (margin)
Fiecare
box are şi o distanţă exterioară (margin) până la celelalte elemente,
care preia culoarea de fundal a elementului înconjurător.