MagyarmagyarTé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ó
Szekció neve “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ó
Szekció neve “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
Szekció neve “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
Szekció neve “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
Szekció neve “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
Szekció neve “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).
Készült: