検索
ホームページウェブフロントエンドCSSチュートリアルCSSで行間を設定するにはどうすればいいですか? 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 までご連絡ください。
カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee&#039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

まあ、SVG&#039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind&#039;の@Apply機能は、響きよりも優れていますTailwind&#039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind&#039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

私はリリースがないように感じます:正気な展開への旅私はリリースがないように感じます:正気な展開への旅Apr 23, 2025 am 09:19 AM

馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター