ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで段落をインデントする方法

CSSで段落をインデントする方法

青灯夜游
青灯夜游オリジナル
2021-01-06 14:46:527794ブラウズ

CSS では、text-indent 属性を使用してテキストの段落をインデントできます。「text-indent: indent value;」スタイルを段落要素に追加するだけです。 text-indent 属性は、テキスト ブロック内のテキストの最初の行のインデントを設定でき、負の値を許可します。値が負の数の場合、最初の行はインデントされたままになります。

CSSで段落をインデントする方法

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

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

CSS 段落インデント

段落のデフォルト スタイルを変更する場合要素、let 段落をインデントするには、text-indent 属性を使用できます。

text-indent 属性は、テキスト ブロック内のテキストの最初の行のインデントを指定します。負の値も許可されます。値が負の場合、最初の行はインデントされたままになります。

属性値:

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

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

例: text-indent として

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p{width: 200px;border: 1px solid red;}
			.text-indent{text-indent:2em;}
		</style>
	</head>
 
	<body>
		<p>测试文本!测试文本!测试文本!测试文本!测试文本!</p>
		<p class="text-indent">测试文本!测试文本!测试文本!测试文本!测试文本!</p>
	</body>
 
</html>

class を持つ p 要素は、2 フォントの長さだけインデントされます。

レンダリング:

CSSで段落をインデントする方法

プログラミング関連の知識については、プログラミング教育をご覧ください。 !

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

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