CSS で単語間の間隔や単語の左右の間隔を調整できますか?-フロントエンドQ&A-php.cn

CSS で単語間の間隔や単語の左右の間隔を調整できますか?

青灯夜游

リリース： 2022-05-18 17:30:31

オリジナル

5707 人が閲覧しました

cssは単語と単語の間隔を調整できます。 CSS では、letter-spacing 属性を使用して、単語間の左右の間隔を調整できます。構文は「letter-spacing: spacing value;」です。この属性では、負の値を使用できます。この属性は、次の方法で増減できます。属性の正または負の値文字間のスペース (文字間隔) を減らします。

CSS で単語間の間隔や単語の左右の間隔を調整できますか?

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

css では、単語間の間隔や単語の左右の間隔を調整できます。

CSS では、letter-spacing 属性を使用して単語間の左右の間隔を調整できます。

letter-spacing プロパティは、文字間の間隔 (文字間隔) を設定できます。

構文形式:

letter-spacing:间距值;

ログイン後にコピー

間隔値: 文字間の固定間隔を定義します。

注:

letter-spacing プロパティは、テキスト文字ボックス間に挿入されるスペースの量を定義します。文字グリフは通常、その文字ボックスよりも狭いため、長さの値を指定すると、文字間の通常の間隔が調整されます。したがって、normal は値 0 と同等です。
この属性の場合: 各漢字は「文字」とみなされ、各英語文字も「文字」とみなされます。したがって、細心の注意を払ってください。

letter-spacing 属性では負の値を使用でき、属性の正または負の値によって文字間隔を増減できます。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			h1 {
				letter-spacing: 10px;
			}
			
			p{
				letter-spacing: 2em;
			}
			div{
				letter-spacing: -3px;
			}
		</style>
	</head>

	<body>
		<h1>This is header 1</h1>
		<p>这是一段文本！</p>
		<div>这是一段div文本！</div>
	</body>

</html>

ログイン後にコピー

CSS で単語間の間隔や単語の左右の間隔を調整できますか?