Een veelvoorkomend probleem is een container div hebben waar je andere divs in stopt. De volgende container is bijvoorbeeld 200 px hoog en 400 px breed:
Als we daar vervolgens twee divs van 200x200 in stoppen dan werkt dat prima:
Maar als we deze twee vierkante divs een gele border willen geven dan geeft dat problemen!
Dit komt omdat de border onderdeel wordt van de div. Dus stiekem plakt hij 3px aan elke kant van de div, ze zijn nu dus 206x206! Nu is het mogelijk om de divs 194x194 te maken, dat zou het probleem oplossen maar nog makkelijker is zorgen dat de border naar binnen gaat. Dan kan je de divs 200x200 houden en maakt het niet uit hoe dik je border wordt! Deze code voert een "invert" op je border uit:
.box{
box-sizing: border-box;
}