文章の段落の先頭に一文字分の空白を入れたいなぁ。
というわけで今回は段落の先頭に一文字分の空白を入れる方法について説明します。
目次
段落の先頭に一文字分の空白を入れる
これは非常に簡単です♪
早速コードを見てみましょう。
See the Pen 段落の先頭に一文字分の空白を開ける（CSS デイリーミッション11/16） by そす (@Sosgoyo) on CodePen.
text-indent
ここで着目するのはpタグに付けている「text-indent: 1em; 」です。
「text-indent」はブロック内のテキストの行の前に置く空白の幅を設定します。
空白の幅はpxやrem、em、%など色々な値を設定できます。
ここではemを設定しております。
emは親要素を元にした相対値サイズを指定するものになります。
1emを指定することによって親要素のフォントサイズが変わろうとも、文字サイズと同じ空白を入れることができます。
まとめ
というわけで今回は段落の先頭に一文字分の空白を入れる方法について説明しました！
段落の先頭に空白があるだけで文章の見栄えが変わりますので是非ご活用ください♪
