Line-height vs padding

dabblet.css

/** Line-height vs padding */

html {background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;}

.no-line-height,
.line-height {
	font-size: 30px;
	width: 300px;
	margin: 30px auto;
	background: white;
	padding: 10px;
}
.no-line-height {
	padding: 50px 10px;
}
.line-height {
	height: 100px;
	line-height: 100px;
}

dabblet.html

<h1 class="no-line-height">This is NOT formatted with the line-height method.</h1>
<h1 class="line-height">This is formatted with the line-height method.</h1>

dabblet.js

// alert('Hello world!');

settings.json

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