ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで1行目のインデントを2文字で設定する方法

CSSで1行目のインデントを2文字で設定する方法

王林
王林オリジナル
2020-11-17 11:55:3010634ブラウズ

CSS で最初の行のインデントを 2 文字で設定する方法: text-indent 属性を使用して、[text-indent:2em;] のように最初の行のインデントを 2 文字で設定できます。 text-index 属性は、テキスト ブロック内のテキストの最初の行のインデントを指定するために使用されます。em は相対単位です。

CSSで1行目のインデントを2文字で設定する方法

関連プロパティ:

text-indent プロパティは、テキスト ブロック内のテキストの最初の行のインデントを指定します。

(ビデオ チュートリアルの推奨事項: css ビデオ チュートリアル)

属性値:

  • length は固定インデントを定義します。デフォルト値: 0。

  • % 親要素の幅のパーセンテージに基づいてインデントを定義します。

  • #inherit text-indent 属性の値を親要素から継承することを指定します。

実装コード:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首行缩进</title>
		<style>
			.demo{
				width: 550px;
				height: 200px;
				margin: 50px auto;
			}
			p{
				text-indent:2em;/*em是相对单位,2em即现在一个字大小的两倍*/
			}
			}
		</style>
	</head>
	<body>
		<div class="demo">
		<p>
		这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。
		这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。
		这是一段测试代码,是关于css文本缩进的一段文字。这是一段测试代码,是关于css文本缩进的一段文字。
		</p>
		</div>
	</body>
</html>

関連する推奨事項: CSS チュートリアル

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

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