line-heightが効かない

HTMLのコーディング作業をしていて、line-heightが効かない状態で少し詰まったのでメモしておきます。

サンプルコード

うまくいかなかった場合のサンプルです。
親要素の.sample1と.sample2に指定していたのですが、効いていませんでした。

HTML

<div id="contents">
	<div class="box sample1">
		<h1>line-height: 1;のサンプル</h1>
		<p>line-height: 1;のサンプルに関する説明文テキストテキストテキストテキストテキスト</p>
		<ul>
			<li>適当にリストリストリスト</li>
			<li>適当にリストリストリスト</li>
			<li>適当にリストリストリスト</li>
			<li>適当にリストリストリスト</li>
			<li>適当にリストリストリスト</li>
		</ul>
	</div>
	<div class="box sample2">
		<h1>line-height: 2;のサンプル</h1>
		<p>line-height: 2;のサンプルに関する説明文テキストテキストテキストテキストテキスト</p>
		<ul>
			<li>適当にリストリストリスト</li>
			<li>適当にリストリストリスト</li>
			<li>適当にリストリストリスト</li>
			<li>適当にリストリストリスト</li>
			<li>適当にリストリストリスト</li>
		</ul>
	</div>
</div>

CSS

.sample1 {
	line-height: 1;
}
.sample2 {
	line-height: 2;
}

line-heightが効かなかったときのデモページ
　

サンプルコード

指定しているCSSを調べてみると、*で全要素に対してline-heightが指定されていました。
そのため、親要素に指定しても各要素に継承されていなかったようです。

CSS

.sample1 h1,
.sample1 p,
.sample1 li {
	line-height: 1;
}
.sample2 h1,
.sample2 p,
.sample2 li {
	line-height: 2;
}

各要素に指定することで、line-heightの設定が効くようになりました。
対応後のデモページ