CSS を使用して HTML 内のテキストをインデントするにはどうすればよいですか?
この記事では、HTML ドキュメント内のテキストをインデントするさまざまな方法について説明します。テキストのインデントは、ブロック内のテキスト行の前の空の空白の長さを設定するために使用されます。通常、段落の始まりを示します。
テキストのインデントには一般的なアプローチがいくつかあります。
目次
を使用して、 margin-left プロパティ :
このプロパティは、要素の左側にマージンを追加するために使用されます。必要なスペースを適切な長さ単位またはパーセンテージで指定することで、必要なインデントを追加するために使用できます。
例: この例では、margin-left プロパティを使用してテキストのブロック全体をインデントします。
HTML
> <> html> >>> <> head> >>> > <> style> >>> > p {> > margin-left: 40px;> > }> > style>頭> |
出力:
を使用して、 text-indent プロパティ:
このプロパティは、段落内のテキストの最初の行の前のスペースの量を設定するために使用されます。必要に応じて、長さの単位またはパーセンテージで指定できます。
例: この例では、段落の最初の行が text-indent プロパティを使用してインデントされます。
HTML
> <> html> >>> <> head> >>> > <> style> >>> > p {> > text-indent: 40px;> > }> > style>頭> |
出力:
使用する パディング左プロパティ :
CSS の padding-left プロパティは、要素のコンテンツ ボックスの左端とその内部コンテンツの間のスペースの量を指定します。左側にパディングを作成し、要素の左側の境界からコンテンツを押し出し、スペースとインデントを提供します。
例: この例では、padding left プロパティを example で使用しています。
HTML
> <> html> >>> <> head> >>> > <> style> >>> > p {> > padding-left: 60px;> > }> > style>頭> |
出力: