CSSで行間を設定するにはどうすればいいですか？ CSSテキストの行間設定（コード例）-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSで行間を設定するにはどうすればいいですか？ CSSテキストの行間設定（コード例）

青灯夜游

Oct 10, 2018 am 10:22 AM

css行間隔行高

CSSで行間を設定するにはどうすればよいですか?実際、CSS で行間隔を直接設定する方法はありません。行間隔の効果は、行の高さを間接的に設定することによってのみ実現できます。この章では、CSS テキストの行間隔を調整する方法を理解できるように、行の高さを設定することで CSS の行間隔効果を指定する方法を紹介します。困っている友人は参考にしていただければ幸いです。

まずは、行の高さとは、CSSで行の高さを設定する方法、行間隔の設定と調整方法を理解しましょう。

簡単に言うと、行の高さは単一行の本と同じです。行間の距離が行の高さになります。 Web ページ上のテキストは実際には目に見えない線で書かれており、デフォルトでは線の中央に垂直方向に表示されます。では、CSSで行の高さを設定するにはどうすればよいでしょうか? CSS では、line-height 属性を通じて行の高さを設定できます。css line-height 属性について簡単に紹介します。

css line-height 属性 は、行ボックスのレイアウトに影響します。行間の距離 (行の高さ) を設定するために使用されます。負の値は許可されません。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。

行の高さとフォントサイズの間の計算された差 (CSS では「行間隔」と呼ばれます) は 2 つの半分に分割され、テキストコンテンツの行の上部と下部に追加されます。このコンテンツを含めることができる最小のボックスはラインボックスです。

CSS の line-height 属性の可能な値を見てみましょう:

normal: 適切な行間隔を設定します (デフォルト値)。

number: 数値を設定します。この数値に現在のフォントサイズを乗算して行間隔を設定します。

length: 固定行間隔を設定します。

%: 現在のフォントサイズに基づくパーセント行間隔。

inherit: line-height 属性の値を親要素から継承することを指定します。

注: すべてのブラウザは line-height 属性をサポートしています。

の例を使用して、行の高さ属性 を使用して行間隔を設定および調整する方法を紹介します。次に、行間隔を設定する方法の例を示します。数値を使用して行間隔を設定します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用数值来设置行间距</title>
		<style type="text/css">
			p.small {
				line-height: 0.5
			}
			
			p.big {
				line-height: 2
			}
		</style>
	</head>
	<body>
		<p>
			这是拥有标准行高的段落。 默认行高大约是 1。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
		</p>

		<p class="small">
			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
		</p>

		<p class="big">
			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
		</p>
	</body>

</html>

レンダリング:

CSSで行間を設定するにはどうすればいいですか？ CSSテキストの行間設定（コード例） 2. ピクセル値を使用して行間隔を設定します

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>使用数值来设置行间距</title>
		<style type="text/css">
			p.small {
				line-height: 10px;
			}
			
			p.big {
				line-height: 30px
			}
		</style>
	</head>

	<body>
		<p>
			这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 20px。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
		</p>

		<p class="small">
			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
		</p>

		<p class="big">
			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
		</p>
	</body>

</html>

レンダリング:

CSSで行間を設定するにはどうすればいいですか？ CSSテキストの行間設定（コード例） 3. 行間隔を設定するにはパーセンテージを使用します。

line-height 属性はパーセンテージを指定し、行の高さはフォントを基準にして計算されます。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>使用数值来设置行间距</title>
		<style type="text/css">
			p.small {
				line-height: 80%;
			}
			
			p.big {
				line-height: 200%;
			}
		</style>
	</head>

	<body>
		<p>
			这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
		</p>

		<p class="small">
			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
		</p>

		<p class="big">
			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
		</p>
	</body>

</html>

レンダリング:

CSSで行間を設定するにはどうすればいいですか？ CSSテキストの行間設定（コード例）要約: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、

CSS ビデオチュートリアル

をご覧ください。関連する推奨事項:

php 公共福祉トレーニングビデオチュートリアル

以上がCSSで行間を設定するにはどうすればいいですか？ CSSテキストの行間設定（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

vue怎么修改table行高Jan 31, 2023 pm 04:11 PM

vue修改table行高的方法：1、打开相应的vue文件；2、查看表格样式代码；3、通过修改“:row-style="{height:'20px'}" :cell-style="{padding:'0px'}"”中属性值即可修改表格行高。

css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。

css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。

html中怎么设置每行文字的间隔Feb 26, 2021 pm 04:35 PM

在html中，可以使用line-height属性来设置每行文字的间隔，语法格式“line-height:number|length|%;”。line-height属性可以设置行高，进而调整文字的行间距（行间的距离），它的值越大，那么每行文字的间隔就越高。

WPS文字行间距怎么设置才能让文章更好看Mar 20, 2024 am 11:25 AM

wps文字软件是我们经常会用到的一款文字处理工具，在处理文章段落时，行与行之间有一定的间距这样文章排版看起来就会特别好看。对于有些新手来说，还不清楚怎么设置行间距，下面小编就给大家讲解下WPS文字(word)行间距设置的具体步骤：第1步、打开WPS2019软件，输入一段内容出来，效果如下：然后点击行间矩，这里面有很多设置，1.0倍，1.5倍，2.0倍，2.5倍，3.0倍等设置。第2步、然后我们设置一个3.0倍的。这样这段内容的行间距就变宽了。效果如下：第3步、如果要更宽呢，那就点击其他设置。第4