CSS box-sizing

A <box-sizing> tulajdonság határozza meg, hogy a böngésző hogyan számolja ki egy elem szélességét és magasságát: csak a tartalomra, vagy a padding és border értékekkel együtt.

A box-sizing működése

Két fő értéke van: <content-box> (alapértelmezett) és <border-box>. Content-box esetén a megadott szélesség és magasság csak a tartalomra vonatkozik, míg border-box esetén a padding és border is beleszámít.

Az alábbi kódban két dobozt hasonlítunk össze: az egyik content-box, a másik border-box beállítással rendelkezik:

Vizualizációs példák

A példákból látható, hogy a border-box sokkal kiszámíthatóbb méretezést biztosít, mivel a padding és border is a megadott méreten belül marad.

Content-box és Border-box összehasonlítása

A content-box és a border-box közötti különbség abban rejlik, hogy mi számít bele a szélességbe és magasságba. A border-box segít abban, hogy a teljes elem mérete kiszámítható legyen.

Globális reset beállítás

A gyakorlatban szinte mindig érdemes minden elemre beállítani a border-box értéket. Ehhez CSS reset szabályt használunk.

box-sizing használata layoutokban

Ha több elemet szeretnél egymás mellé helyezni fix szélességű konténerben, a border-box biztosítja, hogy a padding és border ne nyomja ki az elemeket a szülőből.

Tippek a box-sizing használatához

A box-sizing helyes használata megkönnyíti az elrendezések tervezését. Íme néhány tipp:

• Általánosan ajánlott a <box-sizing: border-box;> használata az egész oldalon.
• Használj reset CSS-t, hogy egységesítsd a box-sizing beállítást minden elemnél.
• Teszteld a különböző böngészőkben, hogy biztosan konzisztens legyen a megjelenés.