# Kontextusfüggő térköz

> A beágyazott tartalom (Rich Text, Post Content, WooCommerce) címsorai, bekezdései és listái közötti függőleges térköz szabályozása a sablonstílusban.

A kontextusfüggő térköz teljes irányítást ad a beágyazott tartalomban lévő elemek, például címsorok, bekezdések és listák közötti függőleges térköz (margó) felett. Automatikusan érvényes ezeken belül:

- a Rich Text elemben,
- a Post Content elemben (forrás: WordPress),
- a WooCommerce beágyazott tartalmában (a Pénztár kivételével).

A Bricks alapból megpróbál különféle felső margókat (`margin-block-start`) adni az olyan elemeknek, mint a címsorok és a bekezdések, a környezetüktől függően. Ha ezeket felül akartad írni, kézzel el kellett távolítanod a böngésző térközeit, vissza kellett vonnod a Bricks beépített stílusait, és saját margókat kellett megadnod. A kontextusfüggő térköz ezt leegyszerűsíti: alaphelyzetbe állíthatod ezeket a margókat, és vizuálisan megadhatod a saját szabályaidat a sablonstílusban a **Kontextusfüggő térköz** csoportban.

## A használata

A funkciót a szerkesztőben a **Stíluskezelő → Sablonstílusok → a sablonstílusod → Kontextusfüggő térköz** részen éred el. Az értékek módosítása közben a Stíluskezelő előnézete frissül.

![A Kontextusfüggő térköz csoport a sablonstílusban: az alapértelmezett margók eltávolítása és a HTML-címkék választója](./kepek/stilusok-kontextualis-terkoz.webp)

*A Kontextusfüggő térköz csoport a sablonstílusban: az alapértelmezett margók eltávolítása és a HTML-címkék választója* (https://minta-bolt.hu/home/?bricks=run)

A csoportban kétféle visszaállítás van:

- **Alapértelmezett margók eltávolítása:** kiválaszthatod azokat a HTML-címkéket, amelyekről el akarod távolítani az alapértelmezett margókat (címsor, bekezdés, listák stb.). Ez tiszta kiindulópontot ad az elrendezésedhez illő térközöknek, örökölt vagy alapértelmezett beavatkozás nélkül.
- **Alapértelmezett padding eltávolítása:** kiválaszthatod azokat a címkéket, amelyekről el akarod távolítani az alapértelmezett paddinget, például `ul`, `ol`, `blockquote` és `button`.

## Beállítások áttekintése

| Beállítás | Leírás |
|---|---|
| Alapértelmezett margók eltávolítása | Visszaállítja a margókat a kiválasztott vagy kézzel megadott HTML-címkéken. |
| Alapértelmezett padding eltávolítása | Visszaállítja a paddinget a kiválasztott vagy kézzel megadott HTML-címkéken. |
| Címsor | Felső margót ad az `h1`-től `h6`-ig terjedő elemeknek, ha előttük másik elem áll. |
| Bekezdés | Felső margót ad a `p` elemeknek, ha előttük másik elem áll. |
| Tartalék térköz | Minden olyan elemre érvényes, amely nem címsor, nem bekezdés és nem további célelem, vagy amelynek ezekhez nincs megadva térközérték. |
| További célelemek | Térközszabályok olyan elemekhez, mint `ul`, `blockquote` vagy bármilyen egyedi szelektor. Függőleges margót (fent, lent) és vízszintes paddinget (bal, jobb) lehet megadni. |
| Térköz alkalmazása belül | A kontextusfüggő térközt kiterjeszti az elrendezés más részeire is olyan burkoló szelektorok megadásával, mint a `.contextual-spacing`. |

### Térközváltozók használata

A **Címsor**, a **Bekezdés**, a **Tartalék térköz** és a célelemek mezői változókat is elfogadnak. A mezők melletti változóválasztóval választhatsz, például `var(--space-xl)` értéket a címsoroknak és `var(--space-s)` értéket a bekezdéseknek. Ha a változók folyékony térközskálából származnak (**Stíluskezelő → Térközök**, lásd a [Folyékony térközök](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-folyekony-terkozok/) fejezetet), a szövegblokkok közötti térköz az elrendezés többi részéhez hasonlóan a képernyővel együtt nő és csökken.

## További célelemek

A **További célelemek** ismétlővel a kontextusfüggő térközt a címsoroknál és bekezdéseknél több elemre is kiterjesztheted.

Választhatsz előre megadott elemeket:

- Rendezetlen lista (`ul`)
- Rendezett lista (`ol`)
- Listaelem (`li`)
- Ábra (`figure`)
- Idézet (`blockquote`)

Vagy saját szelektort is megadhatsz, például `.my-class`, `code` vagy `div`.

Mindegyikhez megadható:

- felső és alsó margó (`margin-block`),
- kezdő és záró padding (`padding-inline`).

Így egységes térközt kapsz mindenféle tartalomtípuson.

## Alkalmazás további tartalmi területeken

Adj hozzá segédosztályokat olyan burkolókhoz (például Tároló, Div vagy Blokk elemekhez), amelyek vegyes tartalmi elemeket tartalmaznak, és a Bricks alkalmazza rájuk a kontextusfüggő térköz beállításaidat. Ehhez a **Térköz alkalmazása belül** mezőbe írd be a szelektort (például `.contextual-spacing`), több szelektort vesszővel válassz el.

Az itt megadott szelektoron belül a szabályok kicsit másképp működnek, mint a Rich Textben és a Post Contentben:

- A címsortérköz az `h1`-től `h6`-ig terjedő elemekre érvényes, amelyek nem az első gyermekek.
- A bekezdéstérköz azokra a `p` elemekre érvényes, amelyek nem az első gyermekek. Az Egyszerű szöveg elem alapból `div`-et ad ki, ezért az a tartalék térközt kapja.
- A tartalék térköz a burkoló közvetlen gyermekeire érvényes, ha másik gyermek követ előttük.
- A további célelemek a burkolón belül bárhol megfelelő elemekre érvényesek, ha előttük másik elem áll.

### Miért nem alkalmazza a Bricks alapból minden címsorra és bekezdésre?

A legtöbb Bricks-elrendezésben, főleg, ha a Címsor és az Egyszerű szöveg elemeket más elemekkel együtt használod, a térközt a tárolók közötti hézag (gap) kezeli. Emiatt egyetlen térközszabály minden címsorra és bekezdésre nem lenne minden környezetben értelmes. A kontextusfüggő térköz arra ad rugalmasságot, hogy csak ott alkalmazd, ahol szükség van rá, szelektorokkal és segédosztályokkal.

## 1. példa: beágyazott bejegyzéstartalom

Egyetlen bejegyzéssablont építesz Post Content elemmel (forrás: WordPress). A kontextusfüggő térköz bekapcsolása előtt a bejegyzés a Bricks alapértelmezett térközét mutatja.

Ha bekapcsolod az **Alapértelmezett margók eltávolítása** beállítást, a Bricks a saját alapértelmezett térközét és a böngésző alapmargóit is eltávolítja. Ezután a kontextusfüggő térköz vezérlőivel megadhatod a saját értékeidet. Például:

- Címsor: `2rem`
- Bekezdés: `1.25rem`
- Tartalék: `1rem`

A Bricks ezután csak az elemek között ad térközt, ahol szükséges. A bejegyzés első eleme fölött nincs margó, az egymást követő elemek között viszont egységes a térköz.

Az eredmény: tiszta elrendezés, felül nincs térköz, és te irányítod a függőleges ritmust.

## 2. példa: vegyes tartalmú elrendezés

Van egy egyedi sablonod, amelyben egy tároló a következő elemeket tartalmazza:

- egy Címsor elem,
- egy Egyszerű szöveg elem (`p` címkével),
- egy Kép elem (`figure` címkével),
- egy Post Content elem (forrás: WordPress).

Mivel ezek különböző rendszerekkel kezelik a térközt, az eredmény következetlennek tűnhet. Az elrendezés egységesítéséhez:

1. A **Sablonstílusok → Kontextusfüggő térköz** részen kapcsold be az **Alapértelmezett margók eltávolítása** beállítást.
2. Add meg a térközértékeket, például: Címsor `2rem`, Bekezdés `1.25rem`, Tartalék `1rem`.
3. Töröld a tároló sortávolságát, hogy ne adódjon hozzá a margókhoz.
4. Adj egy globális osztályt, például `.contextual-spacing` a tárolóhoz.
5. Írd be a `.contextual-spacing` szelektort a **Térköz alkalmazása belül** mezőbe.

Az eredmény: a burkolón belüli összes elem követi a kontextusfüggő térközszabályaidat.