HTMLでテキストの各行間の間隔を設定する方法-htmlチュートリアル-php.cn

HTMLでテキストの各行間の間隔を設定する方法

青灯夜游

リリース： 2023-02-08 13:57:38

オリジナル

21994 人が閲覧しました

HTML では、line-height 属性を使用してテキストの各行の間隔を設定できます。構文形式は「line-height:number|length|%;」です。 line-height 属性は、行の高さを設定し、テキストの行間隔 (行間の距離) を調整できます。値が大きいほど、テキストの各行の間隔が広くなります。

HTMLでテキストの各行間の間隔を設定する方法

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML では、line-height 属性を使用してテキストの各行間の間隔を設定できます。 line-height 属性は行の高さを設定し、それによってテキストの行間隔を調整できます。 line-height の値が大きいほど、行間隔が広くなります。

例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p{
				font-size: 20px;
				border: 1px solid red;
			}
			.p2 { 
				line-height: 2em;
			}
			.p3 { 
				line-height: 3em;
			}
		</style>

	</head>

	<body>
		<p class="p1">
			桃之夭夭，灼灼其华。之子于归，宜其室家。<br> 
			桃之夭夭，有蕡其实。之子于归，宜其家室。<br> 
			桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
		</p>
		<p class="p2">
			桃之夭夭，灼灼其华。之子于归，宜其室家。<br> 
			桃之夭夭，有蕡其实。之子于归，宜其家室。<br> 
			桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
		</p>
		<p class="p3">
			桃之夭夭，灼灼其华。之子于归，宜其室家。<br> 
			桃之夭夭，有蕡其实。之子于归，宜其家室。<br> 
			桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
		</p>
	</body>

</html>

ログイン後にコピー

レンダリング

HTMLでテキストの各行間の間隔を設定する方法