【8/27まで】Udemyの人気コースが今なら1,200円から!!

【CSS3】2行目以降のインデントを1文字分下げる(字下げする)方法

【CSS3】2行目以降のインデントを1文字分下げる(字下げする)方法

STEP.1
字下げしたい文章を用意する
字下げしたい文章を用意します。

See the Pen
indent-bf
by shiakisudev (@shiakisu)
on CodePen.


STEP.2
padding-leftで1文字分空ける
padding-leftで1文字分の余白を作ります。

See the Pen
indent-step1
by shiakisudev (@shiakisu)
on CodePen.


STEP.3
text-indentで1文字分、字下げする
1文字分字、下げしたい場合は、text-indent:-1emと指定します。

See the Pen
indent-step2
by shiakisudev (@shiakisu)
on CodePen.


CSS

.ele {
  width: 200px;
  height: 50px;
  background: skyblue;
}
.indent{
  padding-left:1em;
  text-indent:-1em;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です