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

2020年8月23日2023年1月22日

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;
}

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！