CSS Box model demo

dabblet.css

/**
 * CSS Box model demo
 */

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

/* No editing below this point */

#box {
	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;
}

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;
}

aside {
	position: absolute;
	bottom:1em;
	right: 1em;
	z-index: 1;
	line-height: 1.5;
}

dfn {
	display: block;
	font-weight: bold;
	font-style: normal;
}


dfn:before {
	content:"";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -.2em;
	margin-right: .4em;
	border-radius: 50%;
	
}

dfn[title="orange"]:before { background: orange }
dfn[title="yellowgreen"]:before { background: yellowgreen }
dfn[title="yellow"]:before { background: yellow }


dfn[title="orange"] { color: orange }
dfn[title="yellowgreen"] { color: yellowgreen }
dfn[title="yellow"] { color: yellow }

dabblet.html

<p id="box">
	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.
</p>

<aside>
	<h1>Legend</h1>
	<dfn title="orange">border-box</dfn>
	<dfn title="yellow">padding-box</dfn>
	<dfn title="yellowgreen">content-box</dfn>
</aside>

settings.json

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