Pentru a putea aranja elementele HTML in pagina avem nevoie de proprietetea "margin".
Aceasta proprietate se foloseste pentru a creea spatiu intre elemente sau inafara bordurilor.
Se pot adauga margini in directiile (sus, jos, stanga si dreapta).
Pentru a stabili in ce directie se adauga spatiu, se folosesc urmatoarele coduri:
• "margin-top"
• "margin-bottom"
• "margin-left"
• "margin-right"
Proprietatea "margin" se foloseste cel mai des la tabele, paragrafe si imagini.
De exemplu, putem alinia o imagine la 50 de px fata de marginea paginii prin folosirea codului "margin-left: 50px;".
EXEMPLU:
|
html> |
| ↓ |
|
|
Valoarea spatiului se poate exprima si in procente "<p style="margin-left: 5%;">text</p>".
Acestea se pot folosi si impreuna: "<p style="margin-left: 5%; margin-top: 50px;">text</p>"
Daca vrei ca marginea din stanga sa fie egala cu marginea din dreapta va trebui sa folosesti proprietatea "auto":
"<p style="margin: auto;">text</p>"
Se poate folosi si metoda prescurtata. Aceasta metoda este are avantajul unui cod scris mai rapid si mai simplificat. Pentru a simplifica codul avem posibilitatea de a scoate cuvintele "margin-left, margin-top..." si sa le inlocuim direct cu valorile in cifre.
Codul arata in felul urmator:
"<p style="margin: 20px 40px 60px 80px">text</p>"
Ordinea este: "top right bottom left".
Acest cod inseamna ca paragraful se va aranja la 20px fata de marginea de sus, la 40px fata de marginea din dreapta, la 60px fata de marginea de jos si 80px fata de marginea din stanga.