文字の下線

質問

ＣＳＳに
.hr{ border-bottom:1px solid #000000; }

<span class="hr">あいうえお</span>

これで下線を引いて、左詰にして何スペースか空けたいとき
スペースのところまで下線が引かれますよね？
これを改善する方法はありませんでしょうか？

回答No.3

naokita

アンダーラインはリンク<a>と混同しやすいのであまり見ませんが・・・

左寄せ{text-align:left}を前提として
頭から全角スペースを使うか、margin-left:
<u><ins>の利用には注意。
-------------------------------------------------

　<span style="text-decoration: underline">あいうえお</span>
　　<span style="border-bottom:1px solid #000000;">あいうえお</span>
<span style="border-bottom:1px solid #000000; margin-left:1.5em">あいうえお</span>
<span style="text-decoration: underline; margin-left: 2em">あいうえお</span>
<u style="margin-left: 2.5em">あいうえお</u>
<ins style="margin-left: 3em">あいうえお</ins>
<p style="padding-left: 3.5em; text-decoration: underline">あいうえお</p>

回答No.2

ICHI-yan

よく分からないのですが、アンダーラインでは駄目ですか？
text-decoration:underline;
何故、アンダーラインを引きたいかに寄るのですが、spanよりstrongやem等の方が適切だと思います。spanやborder-bottomを使っておられることが、奇異に見えます。

spanは、理由ないひとまとまりって感じです。他に理由がない時に、仕方なく使うものです。emやstrongは強調するってタグです。理由をつけながらcssを別ファイルにすると、管理も楽になりますよ。

今の状態は線が引きたいから線でhrってクラス名ですよね。
cssの考え方は強調したいから、強調タグ。
強調するデザインは下線という考え方です。後日、下線止めて、太字に変更とかでも、強調したい事に変わりなしなので、意味は通る。下線って名前にして、気が変わったら、太字では次第に混乱しますよ。大きなお世話ですが、ちょっと気になりました。

回答No.1

glphon

タグの外にスペース(文字)を置く。
　またもしpadding-leftという意味でのスペースでしたらmargin-leftで空白をあけるようにしてください。