Box-model: content-box vs. border-box

dabblet.css

/**
 * Box-model: content-box vs. border-box
 */
div {
	width: 300px;
	border: 1px solid black;
}
span {
	box-sizing: border-box;
	display: inline-block;
	float: left;
	width: 33%;
	text-align: center;
	padding: 10px;
}
div::after { content: ''; display: block; clear: both; }

dabblet.html

<div class="foo">
	<span>first</span>
	<span>second</span>
	<span>third</span>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}