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

Question

下の記述例で質問があります。 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要素では下の線が現われるのでしょうか？この違いが分かりません。回答よろしくお願いします。

leap_day · Accepted Answer

こんにちは内にこれのみで試した場合には

要素で囲んだとしても下線は表示されません（IE6ではでていません）前回回答していただいた p { line-height:1.5em; }がそのまま残っているのでは？え～と、これのみですると下線が出ないのはbody heightは指定してない限り文書の高さがheightになります ※自身の体験から得たものなので確証はありません keybordと入力してください￣￣￣￣￣￣￣￣￣￣￣￣↑￣この部分がbody heightとなりこれより上が表示領域になり、これ以降にはみ出ているものは表示されません ※上線が表示されるのは表示可能領域にあるからで下線はheight lineより0.1emはみ出しているので表示されていませんなのでbody { height:100%; } などのように表示領域を拡大してやると

のみで囲った場合でも下線は表示されます最も簡単な例は

keybordと入力してください。

あああなどのように

以降に何か記述してheight lineを下げてやると下線は出ます要は・表示領域を増やす・・・か＿＿＿＿＿＿＿＿＿＿＿＿＿＿↑＿0.1em上に上線(1px)がある keybordと入力してください　　　　　←1.0em ￣￣￣￣￣￣￣￣￣￣￣￣￣￣↓￣0.1em下に下線(1px)があるので

もしくはのline-heightを0.2em+border分増やして(1.35em位)やればいいです

grumpy_the_dwarf · Answer

> div要素ではダメ（下の線が消える）なのに、
> なぜp要素では下の線が現われる

そりゃ、行の周囲の空き具合で、たまたまそうなったんでしょう。
ブラウザの既定のmarginが、div要素では狭くp要素では広かったと
推定されます。kbd要素がp要素の最後の行にレンダリングされてい
なかったら、また違う結果になるでしょうね。

文字の周囲に装飾を予定しているのなら、line-heightを心持ち広め
に取ることを推奨します。

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

こんにちは

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

関連するカテゴリからQ&Aを探す

人気Q&Aランキング