下の記述例で質問があります。 CSSソース kbd { margin: 0 0.3em; padding: 0.1em 0.3em; border: 1px solid black; } HTMLソース keybord と入力してください。このような記述のとき、IE7ではkbd要素を囲っている下の線が消えてしまいます。しかし、HTMLソースを、 keybord と入力してください。のようにdiv要素内にkbd要素をp要素で囲ってやると下の線が現われます。 div要素ではダメ（下の線が消える）なのに、なぜp要素では下の線が現われるのでしょうか？この違いが分かりません。回答よろしくお願いします。

教えて!goo >
コンピューター・テクノロジー >
プログラミング・Web制作 >
HTML・CSS >
borderプロパティによる線の表示でdiv要素とp要素で囲った場合の違い

borderプロパティによる線の表示でdiv要素とp要素で囲った場合の違い

解決済

質問者：miya_HN
質問日時：2008/03/10 08:35
回答数：2件

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

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

「LINE 以降」に関するQ&A：友だちと0時以降LINEしてたらまた明日ねっていいますか？

さらに表示

「LINE p」に関するQ&A： P-LINEという釣糸は？

「LINE body」に関するQ&A：ゴシック&ロリータ　BODY　LINEについて

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： leap_day
回答日時：2008/03/10 11:31

こんにちは

<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位)やればいいです

- 0
- 件

通報する

この回答へのお礼

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

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

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

通報する

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

No.1

回答者： grumpy_the_dwarf
回答日時：2008/03/10 08:59

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

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

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

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