html中怎麼設定每行文字的間隔-html教學-PHP中文網

html中怎麼設定每行文字的間隔

青灯夜游

發布： 2023-02-08 13:57:38

原創

21899 人瀏覽過

在html中，可以使用line-height屬性來設定每行文字的間隔，語法格式「line-height:number|length|%;」。 line-height屬性可以設定行高，進而調整文字的行間距（行間的距離），它的值越大，那麼每行文字的間隔就越高。

html中怎麼設定每行文字的間隔

本教學操作環境：windows7系統、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中怎麼設定每行文字的間隔