戻る

段落揃え

左揃え

右揃え

中央揃え

両端揃え(未サポート)

親と同じ(左揃え)

この段落の text-indent は 1em に設定されている。このため、最初の行のみ1文字分だけ字下げされて表示される。2行目以降は通常の通常の位置から始まる。これは自動での折り返し、<br /> による改行共に同じである。この直後に <br /> による改行。
新しい行の開始。

この段落の line-height は 200% に設定されている。これは、行の高さをフォントサイズの 200% にするという意味で、各行の行間は文字の大きさと等しくなる。一つの行内で複数の文字の大きさが有る場合、一番大きいものに合わせられる。したがって、行ごとに、その行内で一番大きい文字と同じ大きさの行間が空く。この文字は大きい。行間は、各行の上下に分配されるため、大きな文字のある行は、その上下の行間が広がる。ただし、IE は段落の最初の行で大きな文字が出てきた場合に、少しおかしいようだ。

この段落の line-height は 1.5 に設定されている。これは、行の高さをフォントサイズの 1.5倍 にするという意味で、各行の行間は文字の大きさの半分となる。一つの行内で複数の文字の大きさが有る場合、一番大きいものに合わせられる。したがって、行ごとに、その行内で一番大きい文字の大きさの 50% の行間が空く。この文字は大きい。行間は、各行の上下に分配されるため、大きな文字のある行は、その上下の行間が広がる。ただし、IE は段落の最初の行で大きな文字が出てきた場合に、少しおかしいようだ。

この段落の letter-spacing は 1em に設定されている。このため、各文字の文字間に1文字分のスペースが出来る。このスペースは、文字の直後に出来るため、最初の文字の手前にスペースが空くことは無い。

行の高さの継承

line-height: 1em
2行
line-height: 200%
2行
line-height: 150%
2行
3行
4行
3行
4行
3行
4行
line-height: 1em
2行
line-height: 2
2行
line-height: normal
2行
3行
4行
3行
4行
3行
4行

戻る