CSSで行間と文字間を設定する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSで行間と文字間を設定する方法

醉折花枝作酒筹

Apr 09, 2021 pm 01:57 PM

css 間隔

CSS では、letter-spacing 属性 (構文 "letter-spacing: value") で単語の間隔を設定でき、行間隔は line-height 属性 (構文 "line-height:") で設定できます。相対値 | 絶対値」。

CSSで行間と文字間を設定する方法

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

CSS の行間隔の設定

CSS では、行間隔は line-height 属性によって設定されます。 line-height の値は、テキストの 2 行間のベースライン間の距離を表します。

テキストのベースラインとは、テキストに下線が付いている場合、その上下の行がテキストのベースラインであることを意味します。

Line-height の値は、相対値または絶対値の特定の値に設定されます。静的ページでは、テキストサイズが固定されている場合は絶対値がよく使用されますが、フォーラムやブログなどのユーザーカスタマイズ可能なフォントサイズを持つページは通常、相対値に設定されているため、対応する行間隔はユーザー定義のフォントサイズに応じて変更できます。

<span style="font-size:24px;"><html>
	<head>
		<title>
			行间距
		</title>
		<style>
			<!--
			p.one{
			font-size:10pt;
			line-height:8pt;
		}
			p.second{
			font-size:18px;
		}
			p.third{font-size:10px;
		}
			p.second,p.third{
			line-height:1.5em;
		}
			-->
		</style>
	</head>
	
	<body>
		<p class="one">9月23日是“秋分”，我国古籍《春秋繁露、阴阳出入上下篇》中说：“秋分者，阴阳相半也，故昼夜均而寒暑平。”“秋分”的意思有二：一是太阳在这时到达黄径180.一天24小时昼夜均分，各12小时；二是按我国古代以立春、立夏、立秋、立冬为四季开始的季节划分法，秋分日居秋季90天之中，平分了秋季。</p>
		<p class="second">秋分时节，我国常见流域及其以北的广大地区，均夏侯进入了秋季，日平均气温都降到了22℃以下。北方冷气团开始具有一定的势力，大部分地区雨季刚刚结束，凉风习习，碧空万里，风和日丽，秋高气爽，丹桂飘香，蟹肥橘黄，秋分是美好宜人的时节。</p>
		<p class="third">秋季降温快的特点，使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。秋分棉花吐絮，烟叶也由绿变黄，正是收获的大好时机。华北地区已开始播种冬麦，长江流域及南部广大地区正忙着晚稻的收割，抢晴耕翻土地，准备油菜播种。</p>
	</body>
</html>
</span>

ログイン後にコピー

コードは上記の通りですが、テキストの最初の段落は絶対値を使用しており、行間はテキストサイズよりも狭く設定されているため、テキストが部分的に重なっています。

2段落目と3段落目はそれぞれ異なる文字サイズが設定されていますが、相対値を使用しているため、行間は自動で調整されます。

CSS で単語間隔を設定します

CSS は letter-spacing プロパティを使用して単語間隔を調整します。プロパティも使用できます。相対値と絶対値を設定します。

<span style="font-size:24px;"><html>
	<head>
		<title>
			字间距
		</title>
		<style>
			<!--
			p.one{
			font-size:10pt;
			letter-spacing:-2pt;
		}
			p.second{
			font-size:18px;
		}
			p.third{
			font-size:11px;
		}
			p.second,p.third{
			letter-spacing:.5em;
		}
		-->
		</style>
	</head>
	
	<body>
		<p classs="one">文字间距1，负数</p>
		<p class="second">文字间距2，相对数值</p>
		<p class="third">文字间距3，相对数值</p>
	</body>
</html>
</span>

ログイン後にコピー

コードは上記の通りですが、テキスト間隔属性のletter-spacingでは、相対値と絶対値だけでなく、負の数値を使用してテキストの重なり効果を実現できることがわかります。

[推奨学習: css ビデオチュートリアル ]

以上がCSSで行間と文字間を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

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

ホットツール

ホットトピック

Java チュートリアル

1659

CakePHP チュートリアル

1416

Laravel チュートリアル

1310

PHP チュートリアル

1258

C# チュートリアル

1232

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。