1. FEJEZET
display: block
A blokkelem (pl. <div>, <p>, <h1>, <section>) új sorban kezdődik, és alapértelmezésben kitölti a szülő teljes szélességét. Ha kisebb szélességet adunk neki, a maradék hely nem marad „üresen” – a böngésző a jobb oldali margóhoz számolja. A rétegmutatón ez látszik:
PRÓBÁLD KI
Három blokkelem
2. FEJEZET
inline, inline-block, block egymás mellett
A soron belüli (inline) elem (pl. <span>, <a>, <strong>) a szöveg folyamában marad, és pontosan akkora, mint a tartalma. Az alábbi bekezdés közepén egyetlen <span class="cimke"> áll. Váltsd át a megjelenítési módját, és állíts rajta belső margót, margót és szélességet:
PRÓBÁLD KI
Ugyanaz a span, háromféle display
A böngésző a szöveget sorokba tördeli, és a soron belüli elemek ugyanúgy haladnak benne, mint a betűk. Ez a span a mondat közepén áll, utána folytatódik a szöveg, egészen a bekezdés végéig, több soron keresztül.
block | inline | inline-block | |
|---|---|---|---|
| Új sorban kezdődik | igen | nem | nem |
| Alapértelmezett szélesség | a szülő teljes szélessége | a tartalomé | a tartalomé |
width, height | hat | nem hat | hat |
| Vízszintes margó és belső margó | hat | hat (eltolja a szomszéd szöveget) | hat |
| Függőleges belső margó | hat | kirajzolódik, de nem tol el semmit: ráfed a szomszéd sorokra | hat (a sor magasabb lesz) |
| Függőleges margó | hat | nem hat | hat |
Gyakori tévedés, hogy az inline elemnek „nincs függőleges belső margója”. Van: a háttér és a szegély kitágul (a fenti példában a zöld sáv), csak a sormagasság nem nő meg, ezért a doboz ráfed a fölötte és alatta lévő sorokra. Ha azt akarod, hogy a függőleges méretek helyet is foglaljanak, használj inline-block-ot.
3. FEJEZET
Elrejtés: display: none, visibility: hidden, opacity: 0
Egy elemet többféleképpen tehetünk láthatatlanná, és ezek nem ugyanazt jelentik:
PRÓBÁLD KI
A 2. elem elrejtése
| Foglal helyet? | Kattintható? | Elérhető billentyűzettel / képernyőolvasóval? | |
|---|---|---|---|
display: none | nem | nem | nem |
visibility: hidden | igen | nem | nem |
opacity: 0 | igen | igen (láthatatlanul!) | igen |
4. FEJEZET
Kitekintés: flex és grid
A display nemcsak azt dönti el, hogyan viselkedik az elem kívülről, hanem azt is, hogyan rendezi el a gyerekeit. A display: flex egy tengely mentén sorba vagy oszlopba rendezi őket (8. téma), a display: grid sorokból és oszlopokból álló rácsba (9. téma). Kívülről mindkettő blokkelemként viselkedik; az inline-flex és az inline-grid ugyanez soron belüli változatban.
ÖSSZEFOGLALÁS
Amit érdemes megjegyezni
block: új sor, teljes szélesség; ha kisebb a szélessége, a maradék a jobb margóba kerül.inline: a szövegben halad;width,heightés függőleges margó nem hat, a függőleges belső margó ráfed a szomszéd sorokra.inline-block: a szövegben halad, de minden méret hat rá.display: noneeltünteti és a helyét is;visibility: hiddencsak láthatatlanná teszi; azopacity: 0elem továbbra is kattintható.