HTML リストのインデント

この投稿では、HTML ドキュメントでテキスト/リストをインデントするさまざまな方法について説明します。

ブロックまたは左隅とリスト コンポーネント内のテキストの行間のスペースの量は、テキスト/リストのインデント スタイルによって決まります。 通常、段落の開始を示します。

テキストを参照する場合、インデントまたはインデントは、段落の左マージンと右マージンの間の距離の変化を指します。 カーソルを行頭に移動し、キーボードの Tab キーを押してテキストをインデントします。

HTML のリスト インデント

HTML Lists は、情報リストを表現するために使用されます。 各リストには、1つ以上のリスト コンポーネントを含めることができます。

HTML リストは 3つのタイプに分類されます。

1. ol - 番号付きまたは順序付きリスト
2. ul - リスト (順不同または箇条書き)
3. dl - 説明のリストまたは定義のリスト

順序付けされていないリスト要素 (<ul>) は、デフォルトでリスト項目をインデントします。 インデントの距離を調整したい場合は、CSS で調整できます。

インデントを一覧表示するには、よく使用される 2つの手法があります。

1. margin-left: この属性は、要素の左側の余白領域を設定するために使用されます。 正の値を指定すると隣接するオブジェクトから遠ざかり、負の値を指定すると近づきます。
2. padding-left: この属性は、コンテンツと境界線の間のスペースの量を指定するために使用されます。 padding-left 属性は、要素の左パディング (スペース) を指定します。

CSS では、padding は要素の境界線とコンテンツの間の領域であり、margin は要素の境界線を囲む領域です。

padding プロパティは要素の内側のスペースを制御し、margin プロパティはその周囲の領域を制御します。

前の概念をさらに理解するために、次の例を検討してください。

<ul class="outerUL">
  <li>Tea</li>
  <li>Coffee
    <ul class="innerUL">
    <li>Black coffee</li>
    <li>Green coffee</li>
    </ul>
  </li>
  <li>Milk Shake</li>
</ul>

.innerUL {
    padding-left: 50px;
}

.outerUL {
    margin-left: 100px;
}

前の例では、1つの順序なしリストと 1つのネストされた順序なしリストを定義しました。 margin-left プロパティは外側のリストをインデントするために使用され、padding-left プロパティは内側のリストをインデントするために使用されます。

HTML と互換性のあるブラウザで上記のコード行を実行します。