テキストインデントプロパティと隣接する兄弟セレクタの使用
良いウェブデザインはしばしば良いタイポグラフィーです。 Webページのコンテンツの多くはテキストとして提示されるので、そのテキストを魅力的で効果的なものにすることができるということは、Webデザイナーとして持っている重要なスキルです。 残念なことに、私たちはオンラインで印刷物と同じレベルの活字体制を取っているわけではありません。 つまり、印刷されたものと同じようにウェブサイト上にテキストを常に確実にスタイルすることはできません。
あなたが頻繁に見ている（そしてオンラインで再作成できる）一般的な段落スタイルは、その段落の最初の行が1つのタブスペースにインデントされている場所です。 これにより、読者は段落の始まりと終わりを見ることができます。
ブラウザはデフォルトでは、ページの下にスペースがある段落を表示して、ページがどこで終わるかを示す方法として表示するので、このビジュアルスタイルはWebページではあまり表示されませんが、 テキストのインデントスタイルのプロパティを使用して行うことができます。
このプロパティの構文は単純です。 ここでは、文書のすべての段落にテキストインデントを追加する方法を示します。
p {テキストインデント：2em; }インデントのカスタマイズ
インデントする段落を正確に指定できる方法の1つは、インデントしたい段落にクラスを追加することができますが、段落を編集してクラスを追加する必要があります。 これは非効率的であり、 HTMLコーディングのベストプラクティスに従わない。
代わりに、段落のインデントを考慮する必要があります。 別の段落の直後にある段落をインデントします。 これを行うには、隣接する兄弟セレクタを使用します。 このセレクタでは、別の段落の直前にある段落をすべて選択しています。
p + p {テキストインデント：2em; }最初の行をインデントしているので、段落にスペースがないことを確認する必要があります（これはブラウザのデフォルトです）。 文体的には、段落間にスペースを入れるか、最初の行をインデントするか 、両方をインデントする必要があります。
p {margin-bottom：0; padding-bottom：0; } p + p {margin-top：0; パディングトップ：0; }負のインデント
text-indentプロパティと負の値を使用して、行の先頭を通常のインデントのように右に移動させることもできます 。 行が引用符で始まって、引用文字が段落の左側のわずかな余白に表示され、文字自体が素晴らしい左揃えを形成するようにする場合は、これを行うことができます。
例えば、ブロッククォートの子孫である段落があり、それが否定的にインデントされているとします。 あなたはこのCSSを書くことができます：
blockquote p {テキストインデント：-.5em; }これは、おそらく開かれている引用符文字を含む段落の始まりを、左にわずかに移動してぶら下げ句読点を作成するようにします。
マージンとパディングについて
Webデザインでは、 余白やパディング値を使用して要素を移動し、空白を作成することがよくあります。 これらのプロパティは、インデントされた段落の効果を達成するためには機能しません。 これらの値のいずれかを段落に適用すると、その段落のテキスト全体（すべての行を含む）は最初の行の代わりに配置されます。