Categories: HTML&CSS

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

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

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

issiki_wp