CSS Margin (veeris, serv, äär)
CSS "margin" omadused määravad tühja ala, elemendi ümber
Iga Html element omab nelja "margin" atribuuti: top, right, bottom ja left (üleval, paremal, all ja vasakul). Piisab sellest, et lisada "margin" atribuudile mingi väärtus ja vstavalt sellele tekitame tühja ruumi Html elemendi ümber. Kasutada saab ka negatiivse väärtusega "margin'it". Sellisel juhul Html elemendid kattuvad, vastavalt atribuudi väärtusele.
Näited
"Margin" omadused ühes deklaratsioonis.
Selles näites demonstreeritakse, kuidas märkida kõik "margin" omadused ühte deklaratsiooni.
"Top-margin"
Selles näites demonstreeritakse, kuidas teksti kohale luua tühikut, kasutades cm. väärtust.
"Top-margin-2"
Selles näites demonstreeritakse, kuidas teksti kohale luua tühikut, kasutades protsent väärtust.
"Bottom-margin"
Selles näites demonstreeritakse, kuidas teksti alla luua tühikut, kasutades cm. väärtust.
"Bottom-margin-2"
Selles näites demonstreeritakse, kuidas teksti alla luua tühikut, kasutades protsent väärtust.
"Left-margin"
Selles näites demonstreeritakse, kuidas tekstist vasakule luua tühikut, kasutades cm. väärtust.
"Left-margin-2"
Selles näites demonstreeritakse, kuidas tekstist vasakule luua tühikut, kasutades protsent väärtust.
"Right-margin"
Selles näites demonstreeritakse, kuidas tekstist paremale luua tühikut, kasutades cm. väärtust.
"Right-margin-2"
Selles näites demonstreeritakse, kuidas tekstist vasakule luua tühikut, kasutades
protsent väärtust.
Kasulikud Näpunäited
Brauserites on erinevad "padding" ja "margin" vaikimisi seaded. S.t. kui jäetakse html ja body "padding" ja "margin" määramata siis võib tulemus olla erinev olenevalt brauserist.
Selle probleemi saab lahendada nii, et määratakse html ja body, "padding" ja "margin" väärtuseks null (0):
html, body {
margin: 0px;
padding: 0px;
}
Nüüd paigutub sinu disain ühtemoodi igas brauseris.
Internet Explorer'is on vaja määrata ka äärise väärtus:
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
| Omadus | Kirjeldus | Väärtus |
|---|---|---|
| margin | Kõik margin omadused ühes deklaratsioonis | margin-top margin-right margin-bottom margin-left |
| margin-bottom | Määratleb vaba ruumi elemendi alaosas | auto lenght % |
| margin-left | Määratleb vaba ruumi elemendist vasakul | auto lenght % | margin-right | Määratleb vaba ruumi elemendist paremal | auto lenght % |
margin-top | Määratleb vaba ruumi elemendi kohal | auto lenght % |
