CSS を使用して HTML 内のテキストをインデントするにはどうすればよいですか?

CSS を使用して HTML 内のテキストをインデントするにはどうすればよいですか?

この記事では、HTML ドキュメント内のテキストをインデントするさまざまな方法について説明します。テキストのインデントは、ブロック内のテキスト行の前の空の空白の長さを設定するために使用されます。通常、段落の始まりを示します。

テキストのインデントには一般的なアプローチがいくつかあります。

目次

を使用して、 margin-left プロパティ :

このプロパティは、要素の左側にマージンを追加するために使用されます。必要なスペースを適切な長さ単位またはパーセンテージで指定することで、必要なインデントを追加するために使用できます。

例: この例では、margin-left プロパティを使用してテキストのブロック全体をインデントします。

HTML




> <> html> >>> <> head> >>> > <> style> >>> > p {> > margin-left: 40px;> > }> > style>頭>

GFGh2へようこそ>

学び、成長し、楽しむためのさまざまなサービスを提供します。無料のチュートリアル、数百万の記事、ライブ、オンライン、教室でのコース、頻繁に開催されるコーディング コンテスト、業界の専門家によるウェビナー、インターンシップの機会、就職の機会。 p>本文>html>>>

出力:

を使用して、 text-indent プロパティ:

このプロパティは、段落内のテキストの最初の行の前のスペースの量を設定するために使用されます。必要に応じて、長さの単位またはパーセンテージで指定できます。

例: この例では、段落の最初の行が text-indent プロパティを使用してインデントされます。

HTML




> <> html> >>> <> head> >>> > <> style> >>> > p {> > text-indent: 40px;> > }> > style>頭>

GFGh2へようこそ>

学び、成長し、楽しむためのさまざまなサービスを提供します。無料のチュートリアル、数百万の記事、ライブ、オンラインおよび教室でのコース、頻繁に開催されるコーディング コンテスト、業界の専門家によるウェビナー、インターンシップの機会と就職の機会。 p>本文>html>>>

出力:

使用する パディング左プロパティ :

CSS の padding-left プロパティは、要素のコンテンツ ボックスの左端とその内部コンテンツの間のスペースの量を指定します。左側にパディングを作成し、要素の左側の境界からコンテンツを押し出し、スペースとインデントを提供します。

例: この例では、padding left プロパティを example で使用しています。

HTML




> <> html> >>> <> head> >>> > <> style> >>> > p {> > padding-left: 60px;> > }> > style>頭>

GFGh2へようこそ>

学び、成長し、楽しむためのさまざまなサービスを提供します。無料のチュートリアル、数百万の記事、ライブ、オンラインおよび教室でのコース、頻繁に開催されるコーディング コンテスト、業界の専門家によるウェビナー、インターンシップの機会と就職の機会。 p>本文>html>>>

出力: