box-sizing: content-box (default)
box width: 300 pixels + 10 pixels padding and 1 pixel border on each side = 322 pixels
box width: 300 pixels + 10 pixels padding and 1 pixel border on each side = 322 pixels
box-sizing: border-box
box width: 300 pixels, including padding and borders
box width: 300 pixels, including padding and borders
Code used in this page
.box-sizing { width: 300px; height: 100px; border: 1px solid #0080ff; margin-bottom: 20px; padding: 10px; /* Firefox */ -moz-box-sizing: content-box; /* WebKit */ -webkit-box-sizing: content-box; /* Opera 9.5+, Google Chrome */ box-sizing: content-box; } .box-sizing-border-box { width: 300px; height: 100px; border: 1px solid #0080ff; margin-bottom: 20px; padding: 10px; /* Firefox */ -moz-box-sizing: border-box; /* WebKit */ -webkit-box-sizing: border-box; /* Opera 9.5+, Google Chrome */ box-sizing: border-box; }