Régóta gyötör a probléma, hogy ha egy szövegdoboz vagy bármilyen div kinézetén szeretnék változtatni padding vagy border segítségével, mindíg bele kell kalkulálni, hogy ezeket az elemeket a doboz valós méretén felül adja hozzá a böngésző.
#szovegdoboz {
width: 300px;
height: 100px;
border-left: 5px; }
A fenti példában a szövegdoboz 300 pixel szélességről 305-re dagad a hozzáadott border-nek köszönhetően. Ha pixelpontos dizájnt készítünk, ez tönkreteheti az egész layoutot, mivel ha a doboz nem fér el vízszintesen, a következő sorba (azaz a weboldal aljára) tolódik.
Az oldschool megoldás az lenne, hogy vonjuk ki a border méretét az eredeti doboz méretéből. Ez megoldja a problémát, de kevésbé flexibilis, mivel ha később változtatunk a dizájnon ezt fejben kell tartani.
Még súlyosabb a helyzet, ha reszponszív, azaz százalék értékeken alapuló a dizájn, mivel ez esetben a számolás még bonyolultabb, illetve nem is kivitelezhető igazán kompromisszum mentesen.
A megoldás a következő tulajdonságok hozzáadása a dobozhoz. Szerencsére még az IE is támogatja 8-as verziótól felfelé, így én nem igazán csinálnék lelkiismereti kérdést a használatából.
#szovegdoboz {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */width: 300px;
height: 100px;
border-left: 5px; }
Készítettem egy összehasonlító példát Codepen-ben, ahol látványosabb a különbség. Ne feledjük, hogy a margin továbbra is a dobozon kívüli értéknek számít, mivel ezt akkor használjuk, ha valóban távolságot szeretnénk tartani két elem között.
