Tavallinen div-elementti
border-box-versio div-elementistä
CSS
/* tästä tulee 100% + 5px + 5px + 1em + 1em levyinen */ .content-box { background-color: yellow; border: 5px solid red; box-sizing: content-box; /* tämä on oletus, ei tarvi määrittää */ width: 100%; margin: 0; padding: 1em; } /* tämän leveytenä säilyy 100% */ .border-box { box-sizing: border-box; margin: 0; padding: 1em; width: 100%; background-color: silver; border: 5px solid red; }
HTML
<div class="content-box">Tavallinen div-elementti</div> <div class="border-box">border-box-versio div-elementistä </div>
Javascript
Konsoli