CSS margó beállítása (CSS margin)

A CSS margin tulajdonság segítségével üresen hagyott területet hozhatunk létre az elemek körül. Ezt magyarul margónak nevezzük. A CSS segítségével személyre szabhatjuk az oldalunkon megjelenő margót. Nem csak egységesen szabhatjuk meg a négy oldalra vonatkozó margó méretet, hanem akár egyesével, oldalakra lebontva is.

Milyen értékeket vehet fel a margin?

Többféleképpen is megadhatjuk a margó értékeit. Nézzük ezeket a megoldásokat:

• auto (ilyenkor a böngészőre bízzuk, hogy meghatározza a margót)
• px (és a többi hosszmértékegység megadásával konkrétan meghatározhatjuk a margót)
• % (ilyenkor a tartóelem méretéből számolja ki a megadott százalék figyelembevételével)
• inherit (ebben az eseteben a margó mértékét a szülő elemtől örökli)

A margin értéke akár negatív is lehet.

Margó meghatározása oldalanként

Ahogy fentebb említettem lehetőségünk van minden egyes oldal esetében külön-külön meghatároznunk a margó méretét. A négy oldalra vonatkozó tulajdonságokat az alábbiak:

• margin-top
• margin-bottom
• margin-right
• margint-left

Szintaktika

margin-*: ÉRTÉK;
Code language: HTTP (http)

A * helyére kell behelyettesíteni a top, bottom, right vagy left értéket, attól függően, hogy melyik oldalra vonatkozólag szeretnénk margót meghatározni. Fontos, hogy nem szükséges az összes oldal margójának meghatározása. Az is elegendő, ha csak egy vagy két oldal margóját állítjuk meg.

Példa

p {
  margin-top: 50px;
  margin-bottom: 20px;
  margin-right: 70px;
  margin-left: 30px;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Margó meghatározása gyorsabb módszerrel

Nem szükséges külön-külön meghatározni az összes oldalra vonatkozó margóértéket. A fent említett négy tulajdonságot egybe is megadhatjuk az alábbi módszerrel.

Szintaktika

margin: top right bottom left;
Code language: HTTP (http)

Ebben az esetben elegendő a különálló oldalak margóit egymás után begépelnünk a fent látható sorrendben. (felső, jobb oldali, lenti, bal oldali)

Példa

p {
  margin: 50px 20px 70px 30px;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A fenti példán jól látszik, hogy az eredmény ugyanaz, mint az előző példa esetében. De itt még nincs vége: ha az utolsó értéket nem szeretnénk meghatározni, akkor nem kell beírni.

Példa

p {
  margin: 50px 20px 30px;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A fenti példában az utolsó értéket, ami a bal oldal nem határoztam meg, így egyszerűsíthettem és kihagyhattam a kódból.

Példa

p {
  margin: 50px 20px;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ebben az esetben csak két értéket adtam meg, így a felső és alsó margó 50px lesz, míg a jobb és bal oldali 20px.

Példa

p {
  margin: 50px;
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ezzel a módszerrel mind a négy oldalra ugyanazt az 50px-es értéket fogja beállítani.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!