21.6. fejezet: CSS alapismeretek – Margók

Négy alapvető beállítás lehetséges:

margin-top: felső margó.

margin-right: jobb oldali margó.

margin-bottom: alsó margó.

margin-left: bal oldali margó

Mindegyik esetén érvényes, hogy a margó nagyságát szabályozó paraméter:

-          auto: a böngésző állítja be.

-          hossz: valamilyen mértékegység szerinti érték, pl.: px, pt, cm, stb.

-          %: a szülőelem százalékában állítja be az értéket.

-          inherit: a szülőelem értékeit örökli.

Megjegyzés: a negatív értékek is megengedettek!

Példa:

p {
    margin-top: 100px;
    margin-right: 150px;
    margin-bottom: 30px;

    margin-left: 80px;
}

margin: a margó teljes szabályozása (mind a négy oldal). A fenti paraméterek együttes megadása. A sorrend: felső, jobb, alsó, bal. A fenti példa ismétlése – immár rövidebb verzióval:

p {
    margin: 100px 150px 30px 80px;
}

Másik lehetőség: ha csak egyetlen paramétert használunk, akkor az mind a négy oldalra vonatkozik.

Megjegyzés: a legegyszerűbb szabályozás a paraméterek sima közlése, ahol csak a nem-zérus értékek kapnak mértékegységet. A lenti példában csak a felső margónak van 20 pixeles értéke, a többi zérus:

h2 {
    margin: 20px 0 0 0;
}

A fejezet leghitesebb forrása: https://www.w3schools.com/css/css_margin.asp