1. FEJEZET
A doboz négy rétege
A böngésző minden elemet egy téglalap alakú dobozként rajzol ki. A doboz belülről kifelé négy rétegből áll:
| Réteg | Tulajdonság | Mire való? | Látszik rajta a háttér? |
|---|---|---|---|
| Tartalom | width, height | a szöveg, a kép, a gyerekelemek helye | igen |
| Belső margó | padding | távolság a tartalom és a szegély között | igen – a háttérszín ide is kiterjed |
| Szegély | border | a doboz kerete (vastagság, stílus, szín) | a szegély saját színével |
| Margó | margin | távolság a szomszédos elemektől | nem – mindig átlátszó |
A margó átlátszó, a belső margó pedig ugyanolyan színű, mint a tartalom háttere – ezért egy egyszerű oldalon szabad szemmel nem látszik, melyik távolság honnan ered. A lenti példában a rétegmutató (a böngészők fejlesztői eszközeihez hasonlóan) ráfesti a rétegeket a valódi elemre, és felírja a méretüket. A háttér milliméterpapír: egy kis négyzet 10 px, egy nagy 50 px.
PRÓBÁLD KI
Margó, szegély, belső margó
Figyeld meg: a margó a dobozon kívül van, ezért eltolja a szomszédos elemeket és a szülő szélét; a belső margó a dobozon belül van, ezért a háttérszín (kék) kitölti. A szegély vastagsága is hozzáadódik a doboz méretéhez.
Rövidített írásmód: egy, kettő, három vagy négy érték
A margin és a padding egyetlen sorban négy oldalt állít be. Az értékek az óramutató járása szerint, felülről indulva következnek: fent, jobbra, lent, balra. Ha kevesebb értéket adsz meg, a hiányzó oldal a szemközti oldal értékét kapja.
PRÓBÁLD KI
Melyik szám melyik oldalra kerül?
| padding-top | padding-right | padding-bottom | padding-left |
|---|---|---|---|
Az auto margó vízszintesen a maradék helyet osztja szét: a margin: 0 auto egy megadott szélességű blokkelemet vízszintesen középre tesz.
2. FEJEZET
Mekkora valójában a doboz? – box-sizing
Ha egy elemnek width: 200px-et adunk, felmerül a kérdés: a 200 px a tartalomra vonatkozik, vagy a teljes, szegéllyel együtt mért dobozra? Ezt dönti el a box-sizing:
content-box(alapértelmezett): awidthcsak a tartalom szélessége; a belső margó és a szegély hozzáadódik, a doboz kifelé nő.border-box: awidtha szegéllyel együtt mért szélesség; a belső margó és a szegély befelé foglal helyet, a tartalom szűkül.
PRÓBÁLD KI
Ugyanaz a width: 200px, kétféle eredmény
box-sizing: content-box
box-sizing: border-box
A legtöbb mai weboldal az elején minden elemre bekapcsolja a border-box-ot, mert így a megadott szélesség „a doboz szélessége” marad, akármekkora belső margót kap:
*, *::before, *::after {
box-sizing: border-box;
}3. FEJEZET
Margó-összeolvadás
Ha két blokkelem egymás alatt áll a normál dokumentumfolyamban, az alsó margója és a következő elem felső margója nem adódik össze: a kettő közül a nagyobb érvényesül. Ezt hívjuk margó-összeolvadásnak (angolul margin collapsing). Csak függőlegesen történik meg, vízszintesen soha.
PRÓBÁLD KI
Mekkora a valódi távolság?
A csíkozott narancs sávok a két margót mutatják: normál blokkfolyamban egymásra csúsznak. Ha a szülőt flex konténerré alakítod, az összeolvadás megszűnik, és a két margó összeadódik.
Nincs összeolvadás, ha
- a szülő flex vagy grid konténer (a gyerekek margói ilyenkor mindig összeadódnak);
- az elem
float-tal úszik, vagyposition: absolute/fixed; - vízszintes margókról van szó;
- szülő és első gyerek esetén: ha a szülőnek van felső belső margója vagy szegélye (különben a gyerek felső margója „kilóg” a szülőből, és a szülő fölött jelenik meg).
Ha az egyik margó negatív, akkor a legnagyobb pozitív és a legkisebb (legnegatívabb) érték összege lesz a távolság: 30px és -10px → 20 px.
4. FEJEZET
Negatív margó
A margó negatív is lehet. A hatása attól függ, melyik oldalra adjuk:
- negatív
margin-top: maga az elem kerül feljebb (és vele együtt a mögötte következők), ráfedhet az előtte álló elemre; negatívmargin-left: az elem balra csúszik; - negatív
margin-bottom/margin-right: az elem a helyén marad, de a következő elem húzódik közelebb (felfelé / balra).
PRÓBÁLD KI
Ki mozdul el?
A negatív margót ritkán használjuk, de jól jön például akkor, ha egy kártya képe „kilóg” a kártya fölé, vagy ha egy elemnek fedésben kell lennie az előzővel. A belső margó (padding) és a szegély nem lehet negatív.
ÖSSZEFOGLALÁS
Amit érdemes megjegyezni
- A doboz rétegei belülről kifelé: tartalom →
padding→border→margin. - A háttér a tartalom és a belső margó alatt látszik; a margó mindig átlátszó.
content-box: teljes szélesség = width + 2 · padding + 2 · border.border-box: teljes szélesség = width.- Egymás alatti blokkelemek függőleges margói összeolvadnak: a nagyobb érvényesül. Flex és grid konténerben nem.
- Negatív felső/bal margó az elemet mozdítja, negatív alsó/jobb margó a következő elemet húzza közelebb.