
下の記述例で質問があります。
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要素では下の線が現われるのでしょうか?この違いが分かりません。
回答よろしくお願いします。
No.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位)やればいいです
どうも勘違いをしていたようです。
kbd要素の下の線が出て成功したのですが、そのあといろいろHTMLソースを変更してブラウザで画面を確認していませんでした。
大変失礼しました。
表示領域の問題なんですね。線を引く場所の領域を広げてやれば表示できるようになるわけですね。
ありがとうございました。
No.1
- 回答日時:
> div要素ではダメ(下の線が消える)なのに、
> なぜp要素では下の線が現われる
そりゃ、行の周囲の空き具合で、たまたまそうなったんでしょう。
ブラウザの既定のmarginが、div要素では狭くp要素では広かったと
推定されます。kbd要素がp要素の最後の行にレンダリングされてい
なかったら、また違う結果になるでしょうね。
文字の周囲に装飾を予定しているのなら、line-heightを心持ち広め
に取ることを推奨します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するQ&A
- 1 cssでのdiv要素内div要素の上部marginについて
- 2 レイアウトが崩れないようにするための、<div>を<div>で囲む理由
- 3 HTML画像の右側にdivで囲ったpタグをど真ん中に表示させたい
- 4 ナビゲーションバー borderプロパティ
- 5 画像はDIVタグとPタグの両方で囲むの?
- 6 Divの中の要素をDivのセンターに設置する方法
- 7 divやp要素の前後は改行されるとありますがどこから改行されるのでしょうか
- 8 td要素内のdiv要素をセンタリングしたい
- 9 CSSでborderの指定を解除する記述方法
- 10 XHTMLでは、インライン要素は必ずブロックレベル要素内に記述となっていますがこの場合は?
関連するカテゴリからQ&Aを探す
おすすめ情報
人気Q&Aランキング
-
4
HTML5で、テーブル内tdタグの高...
-
5
inputタグはformタグで必ず囲む...
-
6
<div align="center">を使わず...
-
7
ある要素の中身を全部グレーア...
-
8
CSS <div>の入れ子が反映さ...
-
9
<DIV>タグは何の略ですか?
-
10
imgタグをそのまま使うことは正...
-
11
submit buttonの違い
-
12
【CSS】floatで左右に並べた...
-
13
figcaption要素の中にul要素
-
14
input type="hidden"で取得した...
-
15
親要素・子要素
-
16
<img>タグにCSSのclass設定可能?
-
17
cssのaリンクで、幅(width=)が...
-
18
fontawesomeのアイコンを少し大...
-
19
FireFoxでリンクをクリックして...
-
20
背景画像をブラウザサイズに合...