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!