【最大10000ポイント】当たる!!質問投稿キャンペーン!

下の記述例で質問があります。

CSSソース
kbd { margin: 0 0.3em;
padding: 0.1em 0.3em;
border: 1px solid black;
}

HTMLソース
<div>
<kbd>keybord</kbd>と入力してください。
</div>

このような記述のとき、IE7ではkbd要素を囲っている下の線が消えてしまいます。
しかし、HTMLソースを、

<div>
<p>
<kbd>keybord</kbd>と入力してください。
</p>
</div>

のようにdiv要素内にkbd要素をp要素で囲ってやると下の線が現われます。
div要素ではダメ(下の線が消える)なのに、なぜp要素では下の線が現われるのでしょうか?この違いが分かりません。

回答よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

こんにちは



<body>内にこれのみで試した場合には<p>要素で囲んだとしても下線は表示されません(IE6ではでていません)
前回回答していただいた p { line-height:1.5em; }がそのまま残っているのでは?

え~と、これのみですると下線が出ないのはbody heightは指定してない限り文書の高さがheightになります
※自身の体験から得たものなので確証はありません

keybordと入力してください
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄↑ ̄この部分がbody heightとなりこれより上が表示領域になり、これ以降にはみ出ているものは表示されません
※上線が表示されるのは表示可能領域にあるからで下線はheight lineより0.1emはみ出しているので表示されていません

なのでbody { height:100%; } などのように表示領域を拡大してやると<div>のみで囲った場合でも下線は表示されます

最も簡単な例は

<div>
<kbd>keybord</kbd>と入力してください。
</div>
あああ

などのように</div>以降に何か記述してheight lineを下げてやると下線は出ます


要は
・表示領域を増やす・・・か

______________↑_0.1em上に上線(1px)がある
keybordと入力してください     ←1.0em
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄↓ ̄0.1em下に下線(1px)がある
ので<div>もしくは<body>のline-heightを0.2em+border分増やして(1.35em位)やればいいです
    • good
    • 0
この回答へのお礼

どうも勘違いをしていたようです。
kbd要素の下の線が出て成功したのですが、そのあといろいろHTMLソースを変更してブラウザで画面を確認していませんでした。
大変失礼しました。

表示領域の問題なんですね。線を引く場所の領域を広げてやれば表示できるようになるわけですね。

ありがとうございました。

お礼日時:2008/03/12 05:48

> div要素ではダメ(下の線が消える)なのに、


> なぜp要素では下の線が現われる

そりゃ、行の周囲の空き具合で、たまたまそうなったんでしょう。
ブラウザの既定のmarginが、div要素では狭くp要素では広かったと
推定されます。kbd要素がp要素の最後の行にレンダリングされてい
なかったら、また違う結果になるでしょうね。

文字の周囲に装飾を予定しているのなら、line-heightを心持ち広め
に取ることを推奨します。
    • good
    • 0
この回答へのお礼

行の広さで変わってくるんですね。
line-heightで少し広めに取りたいと思います。

ありがとうございました。

お礼日時:2008/03/12 05:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング