CSS Box model demo

dabblet.css

/**
 * CSS Box model demo
 */

body {
	width: 300px;
	height: 200px;
	padding: 30px;
	border-width: 10px;
	/*box-sizing: border-box;*/
}

/* No editing below this point */

body {
	width: 300px;
	height: 200px;
	padding: 30px;
	border-style: solid;
	border-color: orange;
	margin: 20px auto;
	background-image: linear-gradient(yellowgreen, yellowgreen), linear-gradient(yellow, yellow);
	background-clip: content-box, padding-box, border-box;	
	font: 100%/1.4 sans-serif;
	text-shadow: 0 1px 1px white;
}

html { background: white; }

body:after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(0,0,0,.05) 1px, transparent 1px),
	            linear-gradient(0deg, rgba(0,0,0,.1) 1px, transparent 1px),
	            linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px),
	            linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px);
	background-size: 10px 10px, 50px 50px, 10px 10px, 50px 50px;
}

dabblet.html

This demo attempts to demonstrate how the CSS box model works. Try adjusting the <code>width</code>, <code>height</code>,
<code>padding</code> or <code>border</code> and observe. You may also try using <code>box-sizing</code> 
to see how it changes the way the box model works. The background grid is at 10px intervals and the darker lines at 50px intervals.

settings.json

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