3. modul · CSS alapok · 17. lecke
A 11. leckében azt mondtuk: próbálj dobozokat látni az oldalon. Most megtanulod, miből áll egy doboz, hogyan számolja ki a böngésző a méretét, és hogyan adsz neki térközt, keretet, lekerekítést és árnyékot. Ez a CSS-elrendezés alapja — minden, ami ezután jön, erre épül.
box-sizing tulajdonságot.margin: 0 auto segítségével.A böngésző minden elemet egy téglalapként rajzol ki — a bekezdést, a címsort, a képet, a linket is. Ez a téglalap négy, egymásba ágyazott rétegből áll, belülről kifelé haladva:
| Réteg | Tulajdonság | Mire való? |
|---|---|---|
| Tartalom | width, height | Maga a szöveg, kép — ennek a méretét állítod. |
| Belső térköz | padding | Hely a tartalom és a keret között. Itt még látszik a háttérszín. |
| Keret | border | Vonal a doboz körül. |
| Külső térköz | margin | Távolság a többi elemtől. Mindig átlátszó. |
<div class="kulso"> <p class="doboz">Ez a tartalom.</p> </div>
/* csak azért, hogy a margó látsszon */
.kulso {
background-color: #fef3c7;
border: 1px dashed #d97706;
}
.doboz {
background-color: #dcfce7;
padding: 24px;
border: 8px solid #be123c;
margin: 30px;
}
„A térköz a doboz része legyen, vagy a dobozon kívül?" Ha a háttérszínnek és a
keretnek körbe kell fognia a helyet — például egy gomb belsejében —, akkor padding.
Ha két doboz között kell hely, akkor margin.
A padding tulajdonság „levegőt" ad a tartalomnak. Enélkül a szöveg a
keretnek vagy a háttér szélének ütközik. Megadhatod oldalanként is:
padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;
A négy sort egyetlen padding sorba is összevonhatod:
| Írásmód | Jelentése |
|---|---|
padding: 20px; | Mind a négy oldal 20 px |
padding: 10px 20px; | Fent-lent 10 px, jobbra-balra 20 px |
padding: 10px 20px 30px; | Fent 10, jobbra-balra 20, lent 30 |
padding: 10px 20px 30px 40px; | Fent 10, jobbra 20, lent 30, balra 40 |
<p class="p1">padding: 20px</p> <p class="p2">padding: 6px 40px</p> <p class="p4">padding: 0 0 20px 60px</p>
p {
background-color: #fce7f3;
border: 2px solid #be123c;
margin: 0 0 10px;
}
.p1 { padding: 20px; }
.p2 { padding: 6px 40px; }
.p4 { padding: 0 0 20px 60px; }
A 16. leckében ígértük: egy gomb belső térközét érdemes em egységben megadni,
például padding: 0.5em 1.2em. Így ha a gomb betűmérete nő, a belső tér is
vele arányosan nő — a gomb nem lesz „szorult".
A keretnek három jellemzője van: vastagság, stílus és szín. A rövidítés mindhármat egy sorban adja meg:
border: 2px solid #be123c;
/* │ │ └─ szín
│ └─ stílus
└─ vastagság */
<p class="solid">solid</p> <p class="dashed">dashed</p> <p class="dotted">dotted</p> <p class="double">double</p> <p class="csapda">border: 4px #be123c — hol a keret?</p>
p {
padding: 6px 10px;
margin: 0 0 8px;
}
.solid { border: 4px solid #be123c; }
.dashed { border: 4px dashed #be123c; }
.dotted { border: 4px dotted #be123c; }
.double { border: 6px double #be123c; }
/* HIÁNYZIK A STÍLUS! */
.csapda { border: 4px #be123c; }
none — stílus nélkül a keret
nem jelenik meg.
Ez a keret leggyakoribb hibája. A vastagság és a szín elhagyható (van alapértékük), de a
stílus nem. Ha a kereted „nem jelenik meg", először azt nézd meg, ott van-e a
solid, dashed vagy dotted szó.
A keret oldalanként is megadható: border-top,
border-right, border-bottom,
border-left. Ez nagyon gyakori díszítő elem.
<h2 class="cim">Címsor aláhúzással</h2> <p class="idezet"> „A jó dizájn az, amit észre sem veszel." </p> <p class="figyelem"> Figyelem: a jelentkezés péntekig tart. </p>
.cim {
border-bottom: 3px solid #fb7185;
padding-bottom: 6px;
}
.idezet {
border-left: 4px solid #9ca3af;
padding-left: 14px;
font-style: italic;
color: #52525b;
}
.figyelem {
border-left: 6px solid #d97706;
background-color: #fef3c7;
padding: 10px 14px;
}
padding: az idézetnél és a
figyelmeztetésnél e nélkül a szöveg rátapadna a keretvonalra.
A margin tulajdonság a doboz körüli helyet adja meg — a
távolságot a szomszédoktól. Ugyanúgy működik, mint a padding: oldalanként
(margin-top …) vagy egy–négy értékes rövidítéssel.
| Különbség | padding | margin |
|---|---|---|
| Hol van? | a kereten belül | a kereten kívül |
| Látszik rajta a háttérszín? | igen | nem, átlátszó |
| Lehet negatív? | nem | igen |
Lehet auto? | nem | igen |
A body elemnek alapból 8 px külső térköze van, a bekezdéseknek és a
címsoroknak felül-alul szintén. Ezért „lóg be" néha egy váratlan hely az oldal szélén vagy egy címsor
fölött. Sok stíluslap ezzel indul: body { margin: 0; } — és utána maga
adja meg a kívánt térközöket.
A 16. leckében ígértük, hogy megmutatjuk, hogyan kerül egy doboz középre (a
text-align csak a tartalmát igazítja). A megoldás két feltétel:
width vagy max-width) — különben kitölti a helyet, és nincs mit középre tenni.auto — a böngésző ilyenkor egyenlően osztja szét a maradék helyet.<div class="oldal"> <h2>Középre tett tartalom</h2> <p>A max-width miatt nem nyúlik szét, és a két oldalán egyforma a hely.</p> </div> <p class="rossz">text-align: center — csak a szöveg van középen, a doboz nem.</p>
.oldal {
max-width: 300px;
margin: 0 auto;
background-color: #fce7f3;
padding: 10px 16px;
}
.rossz {
text-align: center;
background-color: #e5e7eb;
padding: 10px;
}
A legtöbb oldal tartalma egy .oldal vagy .tartalom
nevű dobozban van max-width: 1000px; margin: 0 auto; beállítással. Nagy
képernyőn így a tartalom középen marad és nem nyúlik szét, kis képernyőn pedig kitölti a helyet.
Csak vízszintesen működik — függőleges középre igazításhoz a Flexbox kell (20. lecke).
Blokkszintű elemnél a width alapértéke auto:
a doboz kitölti a szülő teljes szélességét. A height alapértéke
szintén auto: a doboz olyan magas, amilyen a tartalma.
| Tulajdonság | Mire való? |
|---|---|
width / height | Pontos méret. Magasságot ritkán adunk meg — ha a tartalom nő, kilóg (11. pont). |
max-width | „Legfeljebb ekkora" — kisebb képernyőn összehúzódhat. A legtöbbször ez kell a width helyett. |
min-width | „Legalább ekkora." |
min-height | „Legalább ekkora magas, de nőhet" — ez a biztonságos magasság-megadás. |
A width: 800px egy 400 px széles telefonon kilóg a képernyőből,
és oldalra kell görgetni. A max-width: 800px ugyanezen a telefonon
egyszerűen 400 px lesz. Nagy képernyőn a kettő ugyanúgy néz ki. Ezt a gondolatot a 22. leckében
(reszponzív design) visszük tovább.
Most jön a dobozmodell legmeglepőbb része. Mekkora lesz ez a doboz?
.doboz {
width: 200px;
padding: 20px;
border: 5px solid #be123c;
}
A legtöbben azt mondják: 200 képpont. Valójában 250. A böngésző alapból úgy számol,
hogy a width csak a tartalom szélessége, és ehhez
hozzáadja a belső térközt és a keretet:
| Összetevő | Képpont |
|---|---|
| bal keret | 5 |
| bal belső térköz | 20 |
tartalom (a width) | 200 |
| jobb belső térköz | 20 |
| jobb keret | 5 |
| A doboz valódi szélessége | 250 |
Ezt a számolási módot hívják content-box módnak. Van egy másik is, a
border-box: ilyenkor a width a
keretet is magában foglalja, és a böngésző a tartalmat húzza össze.
<div class="vonalzo"></div> <p>↑ ez a zöld vonal pontosan 200 px</p> <div class="doboz content">content-box</div> <div class="doboz border">border-box</div>
.vonalzo {
width: 200px;
height: 6px;
background-color: #16a34a;
}
p { margin: 2px 0 12px; font-size: 13px; }
.doboz {
width: 200px;
padding: 20px;
border: 5px solid #be123c;
background-color: #fce7f3;
margin-bottom: 10px;
}
.content { box-sizing: content-box; }
.border { box-sizing: border-box; }
width: 200px áll a kódban.
A 13. leckében ígértük a magyarázatot. Íme a szabály, ami szinte minden stíluslap elején ott van:
*, *::before, *::after {
box-sizing: border-box;
}
Ezzel minden elem border-box módra vált, és a
width végre azt jelenti, amit az ember gondol: a doboz teljes
szélességét. Ha belső térközt vagy keretet adsz hozzá, a doboz nem nő meg — a tartalom
húzódik össze. Így sokkal egyszerűbb elrendezést építeni.
Minden gyakorlófeladat stíluslapja ezzel a szabállyal kezdődjön. A margin
tulajdonságot a border-box sem számolja bele — a külső térköz mindig a
dobozon kívül marad.
Van egy szabály, ami mindenkit meglep először: két egymás alatti blokk függőleges külső térköze nem adódik össze, hanem összeolvad — és csak a nagyobbik marad meg.
<div class="felso">margin-bottom: 30px</div> <div class="also">margin-top: 20px</div> <div class="meroszalag"> <div class="m30">30 px</div> <div class="m50">50 px</div> </div>
.felso, .also {
padding: 8px 12px;
background-color: #fce7f3;
border: 2px solid #be123c;
}
.felso { margin-bottom: 30px; }
.also { margin-top: 20px; }
/* összehasonlító mérőszalag */
.meroszalag { margin-top: 20px; font-size: 12px; }
.m30, .m50 {
width: 60px;
background-color: #16a34a;
color: white;
margin-bottom: 4px;
padding-left: 4px;
}
.m30 { height: 30px; }
.m50 { height: 50px; }
padding vagy border értéke, ez nem történik meg.
Sokan ezt a szabályt követik: függőleges térközt csak egy irányba adnak — például
minden elemnek csak margin-bottom értéket, margin-top
értéket soha. Így nincs mi összeolvadjon, és a térközök kiszámíthatók.
A 11. leckében előre jeleztük: a soron belüli elemeken (span,
a, strong) a dobozmodell nem
egészen úgy működik. Egy soron belüli elem ugyanis a szövegsor része, és nem tolhatja szét
a sorokat.
<p> Ez egy hosszabb bekezdés, amelyben van egy <span class="cimke">soron belüli címke</span>, és látni fogod, hogy a felső és alsó térköz nem tolja el a szomszéd sorokat. </p>
p {
max-width: 320px;
line-height: 1.6;
}
.cimke {
background-color: rgb(190 18 60 / 0.25);
border: 2px solid #be123c;
padding: 12px 8px;
margin: 30px 20px;
width: 300px; /* hatástalan */
}
width tulajdonság pedig semmit nem csinál.
| Soron belüli elemen | Működik? |
|---|---|
padding, margin balra-jobbra | igen |
padding fent-lent | kirajzolódik, de nem tolja a sorokat |
margin fent-lent | nem |
width, height | nem |
Ha egy elemnek a sorban kell maradnia, de rendes dobozként kell viselkednie (például
egy gombnak kinéző linknek), akkor a display: inline-block beállítás kell —
ezt a 18. leckében tanulod meg. (A img elem kivétel: annál a
width és a height tulajdonság működik.)
A border-radius tulajdonság a doboz sarkait kerekíti le. Keret sem kell
hozzá — a háttér is lekerekedik.
<div class="doboz r6">6px</div> <div class="doboz r20">20px</div> <div class="doboz kapszula">kapszula</div> <div class="doboz kor">kör</div> <div class="doboz egy-sarok">egy sarok</div>
.doboz {
background-color: #be123c;
color: white;
padding: 10px 16px;
margin-bottom: 8px;
max-width: 180px;
}
.r6 { border-radius: 6px; }
.r20 { border-radius: 20px; }
.kapszula { border-radius: 999px; }
.kor {
width: 80px;
height: 80px;
padding: 0;
border-radius: 50%;
text-align: center;
line-height: 80px;
}
.egy-sarok { border-radius: 0 24px 0 0; }
999px) — a
böngésző úgyis legfeljebb a doboz felét használja fel. A kör egy
négyzet 50% lekerekítéssel. Figyeld meg, hogy a belső térközét nullára állítottuk: a belső térköz miatt a doboz téglalap lett volna, és abból ellipszis lesz, nem kör. A sarkok ugyanúgy, az
óramutató szerint adhatók meg, mint a térközök — csak a bal felső saroktól indulva.
A box-shadow tulajdonság árnyékot vet a doboz alá. Az értékek sorrendje:
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
/* │ │ │ │ └─ szín (átlátszóval szép)
│ │ │ └─ szétterülés (elhagyható)
│ │ └─ elmosás
│ └─ függőleges eltolás
└─ vízszintes eltolás */
<div class="kartya kemeny">Kemény árnyék</div> <div class="kartya puha">Puha, lebegő árnyék</div> <div class="kartya finom">Finom, alig látható</div> <div class="kartya belso">Belső árnyék (inset)</div>
body { background-color: #f4f4f5; }
.kartya {
background-color: white;
padding: 14px 18px;
margin-bottom: 18px;
border-radius: 10px;
max-width: 240px;
}
.kemeny { box-shadow: 4px 4px 0 #be123c; }
.puha {
box-shadow: 0 10px 25px rgb(0 0 0 / 0.18);
}
.finom {
box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}
.belso {
box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.2);
}
inset
kulcsszó befelé fordítja az árnyékot, mintha a doboz be lenne nyomva.
Kezdők gyakori hibája a sötét, fekete árnyék: box-shadow: 5px 5px 10px black.
Ez nehézkessé teszi az oldalt. A természetes árnyék nagyon átlátszó (10–20%),
lefelé esik (a vízszintes eltolás 0), és puha.
Az árnyék — a outline tulajdonsághoz hasonlóan (14. lecke) — nem része
a doboz méretének, és nem tolja el a szomszédokat. Ha túl közel vannak az elemek, egyszerűen
rálóg a mellette lévőre. Ezért kell az árnyékos kártyák közé elég margin.
Ha egy dobozt rögzített méretűre állítasz, és a tartalma nagyobb, az kilóg belőle.
Az overflow tulajdonság szabja meg, mi történjen ilyenkor.
<div class="doboz visible"> <b>visible</b> — Ez a szöveg túl hosszú ehhez a kis dobozhoz, és valahol ki kell férnie. </div> <div class="doboz hidden"> <b>hidden</b> — Ez a szöveg túl hosszú ehhez a kis dobozhoz, és valahol ki kell férnie. </div> <div class="doboz auto"> <b>auto</b> — Ez a szöveg túl hosszú ehhez a kis dobozhoz, és valahol ki kell férnie. </div>
.doboz {
width: 220px;
height: 52px;
padding: 6px 10px;
border: 2px solid #be123c;
background-color: #fce7f3;
margin-bottom: 44px;
font-size: 14px;
}
.visible { overflow: visible; }
.hidden { overflow: hidden; }
.auto { overflow: auto; }
| Érték | Mit csinál? |
|---|---|
visible | Kilóg — alapértelmezés |
hidden | Levágja — a kilógó tartalom elérhetetlen |
auto | Görgetősávot tesz, ha szükséges — általában ez a jó választás |
scroll | Mindig görgetősávot tesz, akkor is, ha nem kell |
A kilógó tartalom oka szinte mindig egy felesleges height
érték. Ha nem adsz meg magasságot, a doboz a tartalommal együtt nő, és semmi nem lóg ki. Az
overflow tulajdonságra akkor van szükség, ha a rögzített méret tényleg indokolt —
például egy görgethető táblázatnál vagy egy kivágott képnél.
Rakjuk össze a lecke összes eszközét. Ez a kártya a 11. és a 12. lecke kártyájának továbbfejlesztése — és ilyen kártyákból fog állni az 5. és a 6. gyakorlófeladat is.
<div class="kartya">
<img class="avatar" src="kepek/profil.jpg"
alt="Kovács Anna" width="96" height="96">
<h2>Kovács Anna</h2>
<p class="szerep">Webfejlesztő tanuló</p>
<p>Szeretek egyszerű, jól olvasható
weboldalakat készíteni.</p>
<a class="gomb" href="#">Kapcsolat</a>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px 16px;
background-color: #f4f4f5;
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.5;
color: #3a2f35;
}
.kartya {
max-width: 280px;
margin: 0 auto;
padding: 28px 24px;
background-color: white;
border-top: 5px solid #be123c;
border-radius: 14px;
box-shadow: 0 10px 25px rgb(0 0 0 / 0.10);
text-align: center;
}
.avatar {
border-radius: 50%;
border: 4px solid #fce7f3;
}
.kartya h2 {
margin: 12px 0 2px;
font-size: 1.3rem;
}
.szerep {
margin: 0 0 12px;
color: #be123c;
font-weight: 600;
font-size: 0.9rem;
}
.gomb {
display: inline-block;
margin-top: 8px;
padding: 0.55em 1.4em;
background-color: #be123c;
color: white;
text-decoration: none;
border-radius: 999px;
}
margin: 0 auto), a belső levegő (padding),
a felső díszcsík (border-top), a kerek kép
és a kapszula gomb (border-radius), a lebegés
(box-shadow). A gombon látod a display: inline-block
értéket is — ennek a magyarázata a következő lecke.
| Hiba | Mi történik, és mi a megoldás? |
|---|---|
Keret stílus nélkül: border: 2px red |
Nem jelenik meg keret. Kell a stílus: border: 2px solid red. |
A doboz szélesebb, mint a megadott width érték |
A content-box mód hozzáadja a belső térközt és a keretet. Megoldás: box-sizing: border-box minden elemre. |
margin: 0 auto nem tesz középre |
Nincs megadva szélesség (width vagy max-width), vagy az elem soron belüli. |
| Két elem közötti rés kisebb, mint a két margó összege | Nem hiba: margó-összeolvadás. Függőleges térközt csak egy irányba adj. |
width vagy felső margó egy span vagy a elemen |
Soron belüli elemen hatástalan. Megoldás: display: inline-block (18. lecke). |
Rögzített height szöveges dobozon |
Ha több a szöveg, kilóg. Hagyd el a magasságot, vagy használj min-height értéket. |
width: 800px a fő tartalomdobozon |
Telefonon kilóg a képernyőből. Használj max-width értéket. |
Térköz a padding helyett margin tulajdonsággal egy gombon belül |
A háttérszín nem terjed ki a helyre, a gomb „szorult" marad. Belső hely: padding. |
| Sötét, erős árnyék | Nehézkes, régies hatás. Átlátszó (10–20%), lefelé eső, puha árnyék. |
F12 → jelölj ki egy elemet → a Computed fül tetején ott egy színes dobozábra: a kijelölt elem tartalma, belső térköze, kerete és külső térköze, képpontra pontosan. Ha az egeret egy elem fölé viszed az Elements panelen, a böngésző magán az oldalon is kiszínezi a rétegeket. Ha egy térköz „honnan jön?" kérdés merül fel, ez a leggyorsabb válasz.
Előbb válaszolj magadban, csak utána nézd meg a megoldást.
1. Sorold fel a doboz négy rétegét belülről kifelé!
Tartalom (width/height) → belső térköz (padding) → keret (border) → külső térköz (margin).
2. Mit jelent: margin: 10px 20px 30px;?
Fent 10 px, jobbra és balra 20 px, lent 30 px. A három értékes formában a középső érték vonatkozik mindkét oldalra.
3. Milyen széles ez a doboz alapbeállítással, és milyen széles border-box módban? width: 300px; padding: 15px; border: 5px solid;
Alapbeállítással (content-box): 5 + 15 + 300 + 15 + 5 = 340 px. border-box módban: pontosan 300 px — a tartalom húzódik össze 260 px-re.
4. Megadtad: border: 3px #be123c; — de nem látszik keret. Miért?
Hiányzik a keret stílusa (solid, dashed …). A stílus alapértéke none, ezért stílus nélkül a keret nem jelenik meg.
5. Egy elem margin-bottom: 40px, az alatta lévő margin-top: 25px értékű. Mekkora lesz köztük a rés?
40 px. A függőleges margók összeolvadnak, és csak a nagyobbik marad meg — nem 65 px.
6. Egy div elemre margin: 0 auto szabályt írtál, de nem került középre. Mi hiányozhat?
A szélesség. Megadott width vagy max-width nélkül a blokkszintű doboz kitölti a teljes helyet, így nincs mit elosztani a két oldal között.
7. Egy a elemre margin-top: 20px és width: 200px értéket írtál. Miért nem történik semmi?
Mert az a soron belüli elem: rajta a felső és alsó külső térköz, valamint a width tulajdonság hatástalan. Megoldás a display: inline-block (18. lecke).
8. Mikor használsz padding, és mikor margin tulajdonságot?
padding: ha a hely a doboz része — a háttérszín és a keret körülfogja (például egy gomb vagy kártya belsejében). margin: ha a hely a dobozok között van, a dobozon kívül.
padding → border → margin.padding: belső térköz, látszik rajta a háttér · margin: külső térköz, átlátszó, lehet negatív és auto.border: vastagság, stílus és szín — a stílus nélkül nincs keret.max-width + margin: 0 auto.max-width és a min-height a biztonságos; rögzített height ritkán kell.content-box) a width csak a tartalom — a belső térköz és a keret hozzáadódik.*, *::before, *::after { box-sizing: border-box; } — így a width a teljes dobozt jelenti. Minden stíluslap elejére.width hatástalan.border-radius: lekerekítés · 50% egy négyzeten = kör · nagy érték = kapszula.box-shadow: eltolás, elmosás, szín — visszafogottan, átlátszó színnel. Nem foglal helyet.overflow: visible, hidden, auto — de a kilógás oka általában egy felesleges height.