border-box gör livet enklare
Följande lilla kodsnutt gör livet mycket lättare för en frontendutvecklare.
*, *:before, *:after {
box-sizing: border-box;
}
Lägg till koden i din CSS så slipper du brottas med problemet att padding
och border
gör dina elemet bredare än vad du sagt åt dom att vara. Med box-sizing: border-box
läggs dessa på insidan av elementet istället för utsidan och bredden påverkas inte. Många ramverk/css-resets har detta inlagt. Den intresserade kan läsa mer om box-modellen här.
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing:border-box;
box-sizing: border-box;
}
För att vara säker på att tricket skall fungera även i äldre webbläsare så kan du använda dig av vendor prefixen ovan. Stödet för box-sizing
är dock bra i uppdaterade webbläsare och fungerar i IE8 och uppåt.