Chenare si imagini

**Private | Drack** Joi Mai 28, 2009 7:37 pm

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

Chenare si imagini Margin11

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:
<html>
<head>
<title>Exemplu</title>
<style type="text/css">

</style>
</head>
<body>
<img src="margini.gif">
</body>
</html>

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:

<html>
<head>
<title>Exemplu</title>
<style type="text/css">

</style>
</head>
<body>
<img src="margini.gif">
</body>
</html>

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:
<html>
<head>
<title>Exemplu</title>
<style type="text/css">

</style>
</head>
<body>
<div class="clasa1">border-width: 2px; border-style: dotted; border-color: red;</div><br>
<div class="clasa2">border-width: 3px; border-style: dashed; border-color: blue;</div><br>
<div class="clasa3">border-width: 2px; border-style: solid; border-color: green;</div><br>
<div class="clasa4">border-width: 3px; border-style: double; border-color: black;</div><br>
<div class="clasa5">border-width: 2px; border-style: groove; border-color: silver;</div><br>
<div class="clasa6">border-width: 3px; border-style: ridge; border-color: lime;</div><br>
<div class="clasa7">border-width: 2px; border-style: inset; border-color: yellow;</div><br>
<div class="clasa8">border-width: 3px; border-style: outset; border-color: aqua;</div><br>
<div class="clasa9">border-width: 2px; border-style: hidden; border-color: olive;</div>
</body>
</html>

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.

Modelul box serveşte pentru formatarea distanţelor în şi între box-urile unei pagini web şi este extrem de diversificat.