【CSS】2行目以降の始まりを文字そろえしたい

覚え書き

こんにちは sun です ^^
このブログでは初登場ですが、自己紹介はまた今度ということで…
いまさら?
だけど、cssの「text-indent」の覚書を♪

※こんな感じに文字の先頭に「※」や「●」を付けたとき
 2行目をこんな風に文字揃えしたい時

.indent{
margin-left:1em;
text-indent:-1em;
}

とすればよかったのです ^^
もっと書いちゃうと

【注意】こんなこともたまにはあるよね
    そんな時はこう⇓

.indent{
margin-left:4em;
text-indent:-4em;
}

1emは1文字分のこと。
padding-leftで左側に●em分の余白を作成します。
text-indentで-●emすることで1行目を左側に●文字分移動させる。

きっと他にもやり方はあるだろうけど
簡単に使えるますね ^^

コメント

タイトルとURLをコピーしました