shanewholloway/dabblet.css

## dabblet.css
.boxy {
   margin: 15px;
   outline: 1px dashed red;
   width: 200px;
   height: 150px;
   border: 1px solid white;
   padding: 10px;
   position: relative;
}
.boxy>div {
   background-color: white;
   opacity: .5;
   height: 100%;
}

#boxA {
    background: #88a;
    box-sizing: content-box;
}


#boxB {
    background: #8a8;
    box-sizing: padding-box;
}


#boxC {
    background: #a88;
    box-sizing: border-box;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<article id='boxA' class='boxy'><div>Box A</div></article>


<article id='boxB' class='boxy'><div>Box B</div></article>


<article id='boxC' class='boxy'
><div>Box C</div></article>


## settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
	.boxy {
	margin: 15px;
	outline: 1px dashed red;
	width: 200px;
	height: 150px;
	border: 1px solid white;
	padding: 10px;
	position: relative;
	}
	.boxy>div {
	background-color: white;
	opacity: .5;
	height: 100%;
	}

	#boxA {
	background: #88a;
	box-sizing: content-box;
	}


	#boxB {
	background: #8a8;
	box-sizing: padding-box;
	}


	#boxC {
	background: #a88;
	box-sizing: border-box;
	}
	<!-- content to be placed inside <body>…</body> -->

	<article id='boxA' class='boxy'><div>Box A</div></article>


	<article id='boxB' class='boxy'><div>Box B</div></article>


	<article id='boxC' class='boxy'
	><div>Box C</div></article>