A content-box szélessége
Egy elem width értéke 300 px, kétoldali paddingje 16 px, kerete oldalanként 2 px. Content-box esetén a 300 px csak a tartalom szélessége. A keretig mért teljes szélesség 300 + 32 + 4 = 336 px. Ha a szülő csupán 320 px széles, ez az elem már önmagában szélesebb nála.
Ugyanez border-box mellett
Box-sizing: border-box esetén a 300 px már tartalmazza a belső térközt és a keretet. A tartalomnak 300 − 32 − 4 = 264 px marad. A külső margó továbbra is ezen kívül van. A border-box ezért nem azt jelenti, hogy bármilyen margóval és minimális szélességgel biztosan elfér az elem.
A 100% és a hosszú tartalom
Content-box mellett a width: 100% a szülő teljes szélességét elfoglalhatja tartalomként, és ehhez jön a padding. Mobilon ez gyakori kilógási ok. Hosszú URL, rögzített szélességű kép vagy rugalmas elrendezésben érvényesülő minimális méret szintén okozhat problémát, tehát a dobozmodell csak az egyik ellenőrzési pont.
Kis, célzott próba
A próbafelületen készíts 320 px széles szülőt és a fenti gyerekelemet. Válts a két box-sizing érték között, majd adj hozzá hosszú szót és külső margót. Figyeld külön a tartalom, padding, keret és margó méretét. A túlcsordulás elrejtése előtt keresd meg a valóban túl széles elemet, hogy a tartalom és a vezérlők elérhetők maradjanak.
Források
Tudáspróba
Válaszolj a három kérdésre, majd ellenőrizd a megoldókulcsot. Minden helyes válasz 1 pont.
1. Mennyi a content-box példában a keretig mért szélesség?
- A) 336 px
- B) 300 px
- C) 264 px
2. Beleszámít a külső margó a border-box szélességébe?
- A) Csak mobilon
- B) Igen
- C) Nem
3. Mennyi a tartalomszélesség a border-box példában?
- A) 336 px
- B) 264 px
- C) 300 px
Megoldókulcs és visszajelzés
1. A) 336 px A 300 px tartalomhoz 32 px padding és 4 px keret adódik.
2. C) Nem A margin a kereten kívül helyezkedik el.
3. B) 264 px 300 − 32 − 4 = 264 px.
Mit jelent az eredmény?
- 3 pont: mindhárom ellenőrzött összefüggést helyesen alkalmaztad. Változtass meg egy bemeneti adatot a példában, és számold újra az eredményt.
- 1–2 pont: a hibás válaszokhoz tartozó magyarázat alapján vezesd végig újra az érintett számítási lépést.
- 0 pont: olvasd el újra a cikk levezetését, majd próbálkozz a kérdésekkel a megoldókulcs nélkül.
Hiányzó válasszal a próba még nincs lezárva. Ez a rövid önellenőrzés kizárólag a cikkben bemutatott összefüggésekre vonatkozik.