ホームページ > 記事 > ウェブフロントエンド > CSSテキストの前の空白の属性は何ですか?

CSSテキストの前の空白の属性は何ですか?

青灯夜游オリジナル: 2022-09-16 18:45:112099ブラウズ

CSS テキストの前の空白の属性には次のものが含まれます: 1. margin-left 属性: テキスト要素の左マージンを設定できます。構文は "text element {margin-left: margin value;}" です。 2. パディング -left 属性は、テキスト要素の左内側のマージンを設定できます。構文は「テキスト要素 {padding-left: margin value;}」です。 3. text-indent 属性は、最初の行のインデントを指定できます。テキストブロック内のテキストの構文「テキスト要素 {text-indent: インデント値;}」。

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

#CSS テキストの前に空白を実装するには、次の 3 つの属性があります:

margin-left
#padding -left
text-indent

1、margin-left

margin- left 属性テキスト要素の左マージンを設定できます。

定義は左に固定マージン。デフォルト値は 0 です。親オブジェクトの合計幅に基づいて、左マージンをパーセンテージとして定義します。 #例:

#値	説明
##長さ
%

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p{
				border: 1px solid red;
			}
			p.ex1 {
				margin-left: 2cm;
			}
		</style>
	</head>

	<body>

		<p>一个没有指定外边距大小的段落。</p>
		<p class="ex1">一个左外边距为2厘米的段落。</p>
		<p>一个没有指定外边距大小的段落。</p>

	</body>
</html>

CSSテキストの前の空白の属性は何ですか? ##2、padding-left

padding-left プロパティは、テキスト要素の左パディング (パディング) を設定します。

#ValueDescription#length%#例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p{
				border: 1px solid red;
			}
			p.ex1 {
				padding-left: 2cm;
			}
		</style>
	</head>

	<body>

		<p>一个没有指定内边距大小的段落。</p>
		<p class="ex1">一个左内边距为2厘米的段落。</p>
		<p>一个没有指定内边距大小的段落。</p>

	</body>
</html>


固定左を指定しますピクセル、センチメートルなどの特定の単位でのパディング値。デフォルト値は 0px です。
親要素の幅に基づいて左パディングの割合を定義します。この値は、すべてのブラウザーで期待どおりに機能するわけではありません。

##3、text-indent

CSSテキストの前の空白の属性は何ですか?

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

注: 負の値も許可されます。値が負の場合は、最初の行を左にインデントします。

#値

説明定義が修正されましたインデント。デフォルト値: 0。親要素の幅のパーセンテージに基づいてインデントを定義します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p{
				border: 1px solid red;
			}
			p.ex1 {
				text-indent:50px;
			}
		</style>
	</head>

	<body>

		<p>一个没有指定首行缩进的段落。</p>
		<p class="ex1">首行缩进段落50像素。</p>
		<p>一个没有指定首行缩进的段落。</p>

	</body>
</html>

	#長さ
	%
	例:

(学習ビデオ共有:

css ビデオチュートリアル

, CSSテキストの前の空白の属性は何ですか? ウェブフロントエンド

)

以上がCSSテキストの前の空白の属性は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3 Length 对象外边距内边距 margin padding

声明：

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

前の記事：CSSで画像を読み込むことはできるのでしょうか？次の記事：CSSで画像を読み込むことはできるのでしょうか？

続きを見る