Box Model Demo 2

dabblet.css

/**
 * Box Model Demo 2
 */
/*
* {
	box-sizing: border-box;
}*/
/*html, body {
	height: 100%;
}*/
body {
	border: 1px dashed black;
	/*width: 58%;*/
}

.box {
	background: #ffeeee;
	/*float: left;*/
	border: 0 solid red;
/*  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓  */
	box-sizing: content-box; /* initial value */
	
	width: 47%;
	height: 100px; /* how about '%'? */
	padding: 10px; /* how about % */
	margin: 10px auto;
	border-width: 5px;
}

dabblet.html

<div class="box">When your browser displays an element, the element takes up space. You can think of all HTML elements as boxes. All boxes have certain dimensions and are specified by four properties: a content area of the element (e.g., a picture, a text header, etc.) and the optional padding, border and margin properties.</div>
<div class="box">The element is in the center and displays its content. Around that, there is padding. Around that, there is a border. Around that, there is a margin that separates the element from other elements.</div>
<p style="clear: both">The "edges" or the perimeters of each of the previous areas can have different properties defined on them. Thus the content edge can have a certain width or height, the padding edge that surrounds the content can have a certain width or height etc. Any or all of these sizes can be zero.</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}