# Térköz létrehozása margóval és paddinggel

> A margó és a padding különbsége, a negatív margó, a beállítások helye és a TRouBLe szabály.

Képzelj el egy értékes tárgyat egy kiállítási vitrinben. Ha kötelet húzol a vitrin köré, hogy senki ne lökje fel, a vitrin **külső** helyét növelted: ez a margó. Ha a tárgyat a vitrinen belül kicsit odébb tolod, vagy talapzatra teszed, a **belső** helyét állítottad: ez a padding.

Használhatsz Térköz (Spacer) widgetet is, de az plusz elemet és kódot jelent. Ahol lehet, a legjobb gyakorlat a margó és a padding használata.

## Margó

A margó az elem körüli, „külső” hely. Vele az elemet fel-le és jobbra-balra is mozgathatod a konténerben, az elem minden oldalához külön értéket adhatsz. A margó eltolja a szomszédos elemeket.

### Negatív margó

Néha negatív margót adsz egy elemnek, Z-Index-szel együtt, hogy az elemeket egymásra rakd. Ugyanez szakaszoknál és oszlopoknál is működik: így az alsó szakasz felcsúszhat, és eltakarhatja a fölötte lévő háttér egy részét. Például a felső mezőbe írt -6% a szakaszt 6%-kal feljebb húzza.

## Padding

A padding a konténer „belső” helye: az elem és a benne lévő tartalom közötti távolság. A konténer háttere is látszik az elem körül.

Szakaszoknál és oszlopoknál a padding adja a „levegőt” az elemeknek. Például 5%-os felső és alsó padding egy szakaszon, és 5%-os bal padding a jobb oszlopon több fehér helyet ad, és szebbé teszi az oldalt.

## Hol találod a beállításokat

- **Haladó fül:** minden elem általános margó- és padding-beállításai a **Haladó** fül **Elrendezés** szekciójában vannak.
- **Stílus fül:** egyes widgeteknek (például a gombnak vagy az űrlapnak) a **Stílus** fülön vannak további padding-beállításai.
- **Webhelybeállítások:** itt is találsz margó- és padding-beállításokat. Ezek az alapértelmezések, a **Stílus** fül beállításai felülírják őket.

## A beállítás használata

Az értéket PX, EM, % vagy REM egységben adhatod meg. Ha az oldalakat külön szeretnéd állítani, kattints a lánc ikonra, így szétkapcsolod az értékeket.

## A TRouBLe szabály

A margó és a padding értékei a CSS sorrendjében állnak: fent (top), jobb (right), lent (bottom), bal (left). Ha egy CSS-ben például `10px 25px 10px 25px` áll, az 10 px felső és alsó, valamint 25 px bal és jobb paddinget jelent. A sorrendet az angol TRouBLe szóval jegyezheted meg (Top, Right, Bottom, Left).