cssで字下げを行うにはtext-indentを使おう

字下げをするにあたり広く知られていることだと思う。しかし私が実際にtext-indentを使ってみると全く変化がなかった。何故かというと、インライン要素にtext-indentを使っていたからだ。

display:block;と書き加えてやったところ、無事字下げに成功した。

a{text-indent:1em;display:block;}

ここでリンクに下線をつけてやろうなどと思うと以下のようになる。
下線が字下げをした分の左側の余白まで、というか画面いっぱいに広がってしまっている。

dosplay:block;にする以上仕方ないのだが、リンクの装飾と字下げどちらもやりたかった私はtext-indentではなくインライン要素にしてmargin-leftを使うことにした。

a{margin-left:1em;border-bottom:solid3px#999;text-decoration:none;}

結果この記事のタイトルに背くことになってしまっているがこれ以外にやり方を知らないので許してほしい。誰かいい方法を知っていたら教えてください。