Hitta nått kul:
13 Pixlar   /   Tips   /   Kodtips   /   border-box gör livet enklare

border-box gör livet enklare

17 April, 2014

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.