- ベストアンサー
borderプロパティによる線の表示でdiv要素とp要素で囲った場合の違い
下の記述例で質問があります。 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要素では下の線が現われるのでしょうか？この違いが分かりません。 回答よろしくお願いします。
- みんなの回答 （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位)やればいいです
その他の回答 (1)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
> div要素ではダメ（下の線が消える）なのに、 > なぜp要素では下の線が現われる そりゃ、行の周囲の空き具合で、たまたまそうなったんでしょう。 ブラウザの既定のmarginが、div要素では狭くp要素では広かったと 推定されます。kbd要素がp要素の最後の行にレンダリングされてい なかったら、また違う結果になるでしょうね。 文字の周囲に装飾を予定しているのなら、line-heightを心持ち広め に取ることを推奨します。
お礼
行の広さで変わってくるんですね。 line-heightで少し広めに取りたいと思います。 ありがとうございました。
お礼
どうも勘違いをしていたようです。 kbd要素の下の線が出て成功したのですが、そのあといろいろHTMLソースを変更してブラウザで画面を確認していませんでした。 大変失礼しました。 表示領域の問題なんですね。線を引く場所の領域を広げてやれば表示できるようになるわけですね。 ありがとうございました。