# 13. Div elem és Box model

2025. november 23. • 18 perc olvasás • CSS3 alapok

Ebben a leckében megismerkedsz a `<div>` blokk szintű konténer elemmel és a CSS box modellel (dobozmodell). A div elem a weboldal struktúrájának kialakításához elengedhetetlen, míg a box model az elemek méretezését és térközét szabályozza.

#### Érettségi információ

Ez a lecke EMELT SZINTŰ érettségi anyag!

Ebből a leckéből érettségi anyag:

- A `<div>` elem használata, szakaszok/csoportok kialakítása
- A dobozmodell alapjai (content, padding, border, margin)
- Szegélyek beállítása (`border`)
- Térközök (`margin`, `padding`)
- Méretek (`width`, `height`)

Bónusz anyag (nem kötelező): box-shadow, outline részletesen.

## A <div> elem - Blokk szintű konténer EMELT SZINT

A `<div>` (division = osztály, részleg) egy általános blokk szintű konténer, amely önmagában nem hordoz szemantikus jelentést. Elsősorban csoportosításra és stílusozásra használjuk.

HTML - Div elem alapok
`<!-- Egyszerű div konténer --> <div> <h2>Cím</h2> <p>Tartalom szöveg...</p> </div> <!-- Div class-szal (CSS stílusozáshoz) --> <div class="termek-kartya"> <img src="cpu.jpg" alt="Processzor"> <h3>Intel Core i9-14900K</h3> <p>249 990 Ft</p> <button>Kosárba</button> </div> <!-- Div id-val (egyedi azonosító) --> <div id="header-wrapper"> <!-- Tartalom --> </div>`

### Div elem jellemzői

Tulajdonság | Érték | Magyarázat
--- | --- | ---
Blokk elem | `display: block` | Új sorban kezdődik, teljes szélesség (div, p, h1)
Inline elem | `display: inline` | Szövegfolyamban marad, méret nem állítható (span, a)
Inline-blokk | `display: inline-block` | Szövegfolyamban, de szélesség/magasság állítható
Elrejtés | `display: none` | Elem elrejtése, helyet sem foglal
Szemantika | Nincs | Nem hordoz jelentést, csak csoportosít
Tartalmazhat | Bármit | Blokk és inline elemeket egyaránt

#### Szemléltető ábra - Display típusok:

1. Block elemek (div, p, h1) - Új sorban, teljes szélesség:

Block elem 1
Block elem 2
Block elem 3

2. Inline elemek (span, a, strong) - Sorban maradnak, méret NEM állítható:

Inline 1 Inline 2 Inline 3 width: 200px (nem működik!)

3. Inline-block elemek - Sorban maradnak, DE méret állítható:

120px széles
150px széles
100px széles

#### Mikor használj div elemet?

- ✅ Layout wrapper: Oldalrészek csoportosítása (pl. container, wrapper)
- ✅ Stílusozási cél: CSS osztály vagy JavaScript célpont
- ✅ Box model alkalmazása: Méret, térköz, szegély beállítása
- ❌ NE használd: Ha van rá megfelelő szemantikus elem (header, section, article)

## A dobozmodell felépítése EMELT SZINT

Minden HTML elem egy doboz, amely négy fő részből áll (belülről kifelé):

#### A CSS Box Model vizualizációja:

MARGIN (külső térköz)
BORDER (szegély)
PADDING (belső térköz)
CONTENT (tartalom)

Réteg | Angol név | Leírás
--- | --- | ---
Tartalom | Content | A tényleges tartalom (szöveg, kép)
Belső térköz | Padding | Tartalom és szegély közötti tér
Szegély | Border | A doboz kerete/vonala
Külső térköz | Margin | Doboz és más elemek közötti tér

## Width és height - Szélesség és magasság EMELT SZINT

A `width` és `height` tulajdonságok a tartalom méretét határozzák meg (alapértelmezetten).

CSS - width és height
`/* Fix méret */ .doboz { width: 300px; height: 200px; } /* Százalékos méret (szülő elemhez képest) */ .responsive { width: 50%; /* Szülő szélességének 50%-a */ height: auto; /* Automatikus magasság */ } /* Viewport egységek */ .fullscreen { width: 100vw; /* Viewport szélesség */ height: 100vh; /* Viewport magasság */ } /* Minimum és maximum méret */ .flexible { width: 100%; min-width: 200px; /* Nem lehet kisebb */ max-width: 800px; /* Nem lehet nagyobb */ height: auto; min-height: 100px; max-height: 500px; } /* Auto érték */ .auto { width: auto; /* Tartalom vagy szülő alapján */ height: auto; /* Tartalom alapján */ } /* Tartalom alapján (fit-content) */ .fit { width: fit-content; /* Tartalomhoz igazodik */ }`

#### Fontos tudnivalók a méretezésről

- Block elemek: Alapból 100% szélesek (szülő szélességét töltik ki)
- Inline elemek: Nem lehet width/height-ot beállítani
- Inline-block elemek: Sorban maradnak, de width/height beállítható
- Százalék: A szülő elem méretéhez képest számít
- height: 100%: Csak akkor működik, ha a szülőnek van megadott magassága

## Padding - Belső térköz EMELT SZINT

A `padding` a tartalom és a szegély közötti teret határozza meg. A padding területe felveszi az elem háttérszínét.

CSS - padding
`/* Egyedi oldalak */ .doboz { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } /* Rövidített formák */ /* 1 érték: minden oldalon ugyanannyi */ .p1 { padding: 20px; } /* 2 érték: függőleges | vízszintes */ .p2 { padding: 10px 20px; } /* = padding: 10px 20px 10px 20px; */ /* 3 érték: felső | vízszintes | alsó */ .p3 { padding: 10px 20px 30px; } /* = padding: 10px 20px 30px 20px; */ /* 4 érték: felső | jobb | alsó | bal (óramutató járása) */ .p4 { padding: 10px 20px 30px 40px; } /* Gyakori minták */ .card { padding: 20px; /* Egyenletes belső tér */ } .button { padding: 12px 24px; /* Gomb: kevesebb függőleges, több vízszintes */ } .section { padding: 60px 20px; /* Nagy függőleges, kis vízszintes */ } /* Százalékos padding (szülő SZÉLESSÉGÉHEZ képest!) */ .responsive-padding { padding: 5%; /* Figyelem: a magasság is a szélességhez képest! */ }`

#### Élő példa - Padding:

padding: 10px
padding: 20px
padding: 10px 40px
padding: 30px 10px

## Margin - Külső térköz EMELT SZINT

A `margin` az elem és a szomszédos elemek közötti távolságot határozza meg. A margin területe átlátszó.

CSS - margin
`/* Egyedi oldalak */ .doboz { margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; } /* Rövidített formák (ugyanaz mint padding) */ .m1 { margin: 20px; } /* Minden oldalon */ .m2 { margin: 10px 20px; } /* Függőleges | Vízszintes */ .m3 { margin: 10px 20px 30px; } /* Felső | Vízszintes | Alsó */ .m4 { margin: 10px 20px 30px 40px; } /* Felső | Jobb | Alsó | Bal */ /* Auto érték - Vízszintes középre igazítás */ .centered { width: 800px; margin: 0 auto; /* Függőlegesen 0, vízszintesen auto = középre */ } /* Negatív margin (elem eltolása) */ .overlap { margin-top: -20px; /* Felső elemre rácsúszik */ margin-left: -10px; /* Balra túlnyúlik */ } /* Margin összeomlás (collapse) figyelembevétele */ .section { margin-bottom: 40px; } .next-section { margin-top: 30px; /* A tényleges távolság 40px lesz, nem 70px! */ }`

#### Margin collapse (margin összeomlás) BÓNUSZ

- Mi ez? Függőleges margók összeolvadnak, a nagyobb érvényesül
- Mikor történik? Szomszédos block elemek között, szülő-gyerek között
- Megoldás: Padding használata, vagy `overflow: auto` a szülőn
- Nem történik: Vízszintes margóknál, flex/grid elemeknél

CSS - Margin collapse példa és megoldás
`/* Margin collapse probléma */ .parent { background: #f0f0f0; /* A gyerek margin-ja "kifolyik" */ } .child { margin-top: 20px; /* Ez a szülő fölé kerül, nem belül marad! */ } /* Megoldások */ /* 1. Padding a szülőn */ .parent-fix1 { padding-top: 1px; /* Már nem folyik ki */ } /* 2. Border a szülőn */ .parent-fix2 { border-top: 1px solid transparent; } /* 3. Overflow */ .parent-fix3 { overflow: auto; /* Vagy hidden */ } /* 4. Display: flow-root (modern) */ .parent-fix4 { display: flow-root; }`

## Border - Szegély EMELT SZINT

A `border` a doboz keretét/szegélyét határozza meg. Három fő tulajdonsága van: stílus, vastagság és szín.

CSS - border tulajdonságok
`/* Egyedi tulajdonságok */ .doboz { border-width: 2px; border-style: solid; border-color: #333; } /* Rövidített forma */ .doboz { border: 2px solid #333; /* vastagság stílus szín */ } /* Border stílusok */ .solid { border: 2px solid #333; } /* Folytonos */ .dashed { border: 2px dashed #333; } /* Szaggatott */ .dotted { border: 2px dotted #333; } /* Pontozott */ .double { border: 4px double #333; } /* Dupla */ .groove { border: 4px groove #333; } /* Bevésett */ .ridge { border: 4px ridge #333; } /* Kidomborodó */ .inset { border: 4px inset #333; } /* Bemélyedő */ .outset { border: 4px outset #333; } /* Kiemelkedő */ .none { border: none; } /* Nincs */ /* Egyedi oldalak */ .custom { border-top: 3px solid #007bff; border-right: 1px solid #ccc; border-bottom: 3px solid #007bff; border-left: 1px solid #ccc; } /* Csak egy oldal */ .underline { border: none; border-bottom: 2px solid #333; } /* Border eltávolítása */ input { border: none; /* vagy */ border: 0; }`

#### Élő példa - Border stílusok:

solid
dashed
dotted
double
groove
ridge

### border-radius - Lekerekített sarkok

CSS - border-radius
`/* Egyenletes lekerekítés */ .rounded { border-radius: 8px; } .more-rounded { border-radius: 20px; } .pill { border-radius: 50px; } /* Kapszula forma */ .circle { border-radius: 50%; } /* Kör (négyzet elemből) */ /* Egyedi sarkok */ .custom { border-top-left-radius: 20px; border-top-right-radius: 10px; border-bottom-right-radius: 20px; border-bottom-left-radius: 10px; } /* Rövidített forma (4 érték) */ .shorthand { border-radius: 20px 10px 20px 10px; /* Bal-felső, jobb-felső, jobb-alsó, bal-alsó */ } /* 2 érték */ .two-values { border-radius: 20px 10px; /* Bal-felső & jobb-alsó | Jobb-felső & bal-alsó */ } /* Elliptikus lekerekítés */ .elliptic { border-radius: 50px / 25px; /* Vízszintes / függőleges sugár */ } /* Gyakorlati példák */ .button { border-radius: 4px; /* Enyhe lekerekítés */ } .card { border-radius: 12px; /* Modern kártya */ } .avatar { border-radius: 50%; /* Kör alakú profilkép */ width: 100px; height: 100px; }`

#### Élő példa - border-radius:

## Box-sizing - Méretezési modell EMELT SZINT

A `box-sizing` tulajdonság meghatározza, hogy a `width` és `height` mire vonatkozzon.

CSS - box-sizing
`/* content-box (alapértelmezett) */ .content-box { box-sizing: content-box; width: 200px; padding: 20px; border: 5px solid #333; /* Teljes szélesség: 200 + 20*2 + 5*2 = 250px */ } /* border-box (ajánlott) */ .border-box { box-sizing: border-box; width: 200px; padding: 20px; border: 5px solid #333; /* Teljes szélesség: 200px (padding és border beleszámít) */ } /* Globális beállítás (AJÁNLOTT minden projektben) */ *, *::before, *::after { box-sizing: border-box; } /* Vagy öröklődéssel */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }`

#### Élő példa - content-box vs border-box:

Mindkettő: width: 200px, padding: 20px, border: 5px

content-box (250px teljes)

Tartalom

border-box (200px teljes)

Tartalom

#### Miért használj border-box-ot?

- Intuitívabb: A megadott width a teljes doboz szélessége
- Könnyebb számítás: Nem kell fejben összeadni padding + border
- Reszponzív design: width: 50% tényleg 50% lesz
- Ipari szabvány: Szinte minden CSS framework használja

## Box-shadow - Dobozárnyék BÓNUSZ

A `box-shadow` tulajdonsággal árnyékokat adhatsz az elemekhez, ami mélységet és kiemelést ad a designnak.

CSS - box-shadow
`/* box-shadow: x-offset y-offset blur spread color; */ /* Alapvető árnyék */ .shadow1 { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); } /* Nagyobb árnyék (kiemelkedő elem) */ .shadow2 { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } /* Spread - árnyék mérete */ .shadow3 { box-shadow: 0 0 0 5px #007bff; /* Keret effekt */ } /* Belső árnyék (inset) */ .inner-shadow { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); } /* Több árnyék */ .multi-shadow { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 10px 30px rgba(0, 0, 0, 0.15); } /* Gyakorlati példák */ /* Finom kártya árnyék */ .card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Hover árnyék növelése */ .card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); transform: translateY(-2px); transition: all 0.3s ease; } /* Gomb árnyék */ .button { box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3); } .button:active { box-shadow: 0 2px 3px rgba(0, 123, 255, 0.3); transform: translateY(1px); } /* Neon glow effekt */ .neon { box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff5500, 0 0 40px #ff5500; }`

#### Élő példa - box-shadow:

Alap
Kiemelkedő
Inset
Keret

## Outline - Körvonal BÓNUSZ

Az `outline` hasonló a border-hez, de nem foglal helyet és nem befolyásolja a layout-ot.

CSS - outline
`/* Alap outline */ .outline { outline: 2px solid #007bff; } /* Outline eltávolítása (FIGYELEM: akadálymentesség!) */ button:focus { outline: none; /* ❌ Rossz gyakorlat */ } /* Helyette: látható focus jelzés */ button:focus { outline: 2px solid #007bff; outline-offset: 2px; } /* Vagy custom focus ring */ button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); } /* Outline offset (távolság az elemtől) */ .offset { outline: 2px solid #007bff; outline-offset: 4px; } /* Border vs Outline különbség */ .border-example { border: 3px solid red; /* Helyet foglal, növeli a méretet */ } .outline-example { outline: 3px solid blue; /* Nem foglal helyet, "lebeg" */ }`

#### Outline és akadálymentesség

- Ne távolítsd el az outline-t fókusz jelzőként való használata kritikus
- Billentyűzet navigáció: A felhasználók látják, hol van a fókusz
- Ha eltávolítod: Adj helyette látható alternatívát (box-shadow, border)
- :focus-visible: Csak billentyűzetes navigációnál mutatja

## Gyakorlati példa: Termékkártyák

HTML + CSS - 3 termékkártya egymás mellett
`<!-- HTML --> <div class="product-grid"> <div class="product-card"> <div class="product-image">CPU</div> <div class="product-content"> <h3 class="product-title">Intel Core i9-14900K</h3> <p class="product-desc">24 mag, 5.8 GHz max turbo</p> <div class="product-price">249 990 Ft</div> </div> </div><div class="product-card"> <div class="product-image">GPU</div> <div class="product-content"> <h3 class="product-title">GeForce RTX 4080</h3> <p class="product-desc">16 GB GDDR6X, ray tracing</p> <div class="product-price">449 990 Ft</div> </div> </div><div class="product-card"> <div class="product-image">RAM</div> <div class="product-content"> <h3 class="product-title">Kingston Fury 32GB</h3> <p class="product-desc">DDR5-6000, CL36, RGB</p> <div class="product-price">42 990 Ft</div> </div> </div> </div> <!-- CSS --> <style> /* Globális box-sizing */ *, *::before, *::after { box-sizing: border-box; } /* Konténer */ .product-grid { width: 100%; } /* 3 oszlopos elrendezés inline-block-kal */ /* Számítás: 30% × 3 = 90%, margin 5% × 2 = 10%, összesen 100% */ .product-card { display: inline-block; width: 30%; margin-right: 5%; vertical-align: top; /* Háttér és border */ background: white; border: 1px solid #e0e0e0; border-radius: 12px; /* Árnyék */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Túlcsordulás (lekerekített képhez) */ overflow: hidden; } /* Utolsó kártya margin nélkül */ .product-card:last-child { margin-right: 0; } .product-image { width: 100%; height: 100px; background: #007bff; color: white; text-align: center; line-height: 100px; font-weight: bold; } .product-content { padding: 15px; } .product-title { margin: 0 0 8px 0; font-size: 1rem; } .product-desc { margin: 0 0 12px 0; color: #666; font-size: 0.85rem; } .product-price { font-size: 1.2rem; font-weight: bold; color: #007bff; } </style>`

#### Élő példa - 3 termékkártya egymás mellett:

CPU

### Intel Core i9-14900K

24 mag, 5.8 GHz

249 990 Ft
GPU

### GeForce RTX 4080

16 GB GDDR6X

449 990 Ft
RAM

### Kingston Fury 32GB

DDR5-6000, CL36

42 990 Ft

A `display: inline-block` és `width: 30%` segítségével 3 kártya jelenik meg egymás mellett (30% × 3 + 5% × 2 = 100%).

## Összefoglalás

Ebben a cikkben megismerkedtél a CSS box modellel:

- Box model rétegek: content → padding → border → margin
- Méretezés: width, height, min/max értékek
- Padding: Belső térköz (háttérszínnel)
- Margin: Külső térköz (átlátszó, összeomlás!)
- Border: Szegély stílus, vastagság, szín, border-radius
- Box-sizing: border-box (ajánlott) vs content-box
- Box-shadow: Árnyékok és effektek
- Outline: Körvonal (fókusz jelzéshez)

#### Példák a weboldalunkon

Nézd meg, hogyan használjuk a box modellt:

- Főoldal - Termékkártyák padding és border-radius
- Processzor oldal - Specifikációs dobozok margin és padding
- Kapcsolat - Űrlap elemek box-shadow és focus stílusok

#### Következő lépések

Gyakorold a box modellt: készíts kártyákat különböző padding, margin és árnyék értékekkel. Használd a böngésző DevTools-t a vizualizációhoz!

Következő cikk: Pozicionálás - Ismerd meg a display, position, z-index és overflow tulajdonságokat!