Tavallinen div-elementti
border-box-versio samasta div-elementistä
CSS
/* Tämän kokonaisleveydeksi tulee 100% + 2 x 5px + 2 x 1em, eli se vuotaa ulos äitielementistään. */ .content-box { box-sizing: content-box; /* tämä on oletus, ei tarvitse määrittää */ width: 100%; margin: 0; padding: 1em; border: 5px solid #b3261e; background-color: #ffe9a8; } /* Tämän kokonaisleveydeksi jää tasan 100%, koska raja ja täyte lasketaan mukaan. */ .border-box { box-sizing: border-box; width: 100%; margin: 0; padding: 1em; border: 5px solid #b3261e; background-color: #e6f2eb; } /* Useimmissa tyylitiedostoissa border-box asetetaan kerralla kaikille: * { box-sizing: border-box; } */
HTML
<div class="content-box">Tavallinen div-elementti</div> <div class="border-box">border-box-versio samasta div-elementistä</div>
Javascript
Konsoli