CSS line-height: 行間を空ける

文章が読みやすいように行間を調整します。

詳しい説明はこちら。

段落<p>の行間を空けた例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>ページタイトル</title>
	<style type="text/css">
	<!--
	p {
	line-height: 1.5em;
	}
	-->
	</style>
</head>
<body>
<p>
雨ニモマケズ<br>
風ニモマケズ<br>
雪ニモ夏ノ暑サニモマケヌ<br>
丈夫ナカラダヲモチ<br>
慾ハナク<br>
決シテ瞋ラズ
</p>
</body>
</html>

特定の範囲の行間を調節

次のソースで、このように表示される。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>ページタイトル</title>
	<style type="text/css">
	<!--
	#main { line-height: 3em;	}
	.exp {	line-height: 1.5em;	}
	-->
	</style>
</head>
<body>
<p class="exp">
私が大好きな詩を紹介したいと思う。<br>
有名な宮沢賢治の詩だが、改めて読んでほしい。
</p>
<p id="main">
雨ニモマケズ<br>
風ニモマケズ<br>
雪ニモ夏ノ暑サニモマケヌ<br>
丈夫ナカラダヲモチ<br>
慾ハナク<br>
決シテ瞋ラズ
</p>
<p class="exp">
いかがだろうか？読んだ時々によって<br>
印象が違う素的な詩である。
</p>
</body>
</html>