WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:アンダーラインがピチピチです

0:[投稿] 翔太 [2005/01/15 19:34 ][環境:IE6 apache]

text-decoration: underline; とすると、下線がピチピチにくっついてしまいます。
少し隙間を空ける方法はないでしょうか?


1:[回答] miz [2005/01/16 14:36 ]

text-decoration: underline;はインライン要素で利用していると思うのですけど
その要素を含む外側のブロック要素に
line-height: 120%;
などの指定をしてみては?
ブロックの最下行にあるのなら、
margin-bottomかpadding-bottomをブロック要素に指定してみる
などでしょうか?


2:[回答] 翔太 [2005/01/16 16:05 ]

やってみたけどダメでした。
下線はインライン要素のほうにくっついていて、
ブロック要素側で隙間を空けても下線の下に隙間が
空くだけです。無理なんでしょうかね・・・?
IEでもfireFoxでも同じです。


3:[関連] 翔太 [2005/01/16 16:07 ]

ブロック要素のborderlineならpaddingで隙間が空くんですけど、
marginを使ってブロックの幅を中身の文字の幅に合わせることって
できないんですよね?


4:[回答]   [2005/01/16 18:40 ]

>>1-2
underline はテキストのベースラインを基準にして引かれものです。
margin, padding, line-height の影響を受けることは決してありません。

>>3
インライン要素にも margin, border, padding は適用できます。
http://www.mozilla.gr.jp/standards/webtips0015.html

border-bottom で下線を引く場合、ディセンダに左右されますが…


5:[関連] miz [2005/01/17 18:20 ]

>>4
>underline はテキストのベースラインを基準にして引かれものです。
>margin, padding, line-height の影響を受けることは決してありません。

あれ? 次の行との隙間を空けたいのだと勘違いしていました。
失礼しました。


6:[完了] 翔太 [2005/01/18 11:58 ]

とりあえず日本語しか使わなかったので、ディセンダは影響なかったです。
>>4で解決とさせてもらいます。ありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World