- ベストアンサー
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要素では下の線が現われるのでしょうか？この違いが分かりません。 回答よろしくお願いします。
- miya_HN
- お礼率100% (1683/1683)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （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で少し広めに取りたいと思います。 ありがとうございました。
関連するQ&A
- 枠線で全体を囲んだとき下の枠線が消えてしまう
kbd要素を枠線で囲って、その部分と「と入力してください。」の文字とバランスよく表示させたいのですが下のように記述したところ、下の枠線が消えてしまいます。 marginやpaddingを調整してもうまくいきません。 どうすればよいでしょうか？ 回答よろしくお願いします。 CSSソース kbd { margin: 0 0.3em; padding: 0.1em 0.3em; border: 1px solid black; } HTMLソース <kbd>keybord</kbd>と入力してください。
- ベストアンサー
- HTML
- floatしたdiv内の要素について
下記のようなHTML、CSSで、 floatしたdiv「leftside」内にp要素を配置すると p要素の上下に空間が発生します。 このp要素の上下の空間はなんでしょうか？ どうすれば消えますか？ ちなみに、スタイルシートから「leftside」の「float: left;」を削除するとp要素の上下空間はなくなります。 または、pタグで囲まなくても空間は消えます。 よろしくお願いいたします。 ■Html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test_style.css" media="all"> </head> <body> <div id="warapper"> <!-- ヘッダ --> <div id="head"> </div> <!-- 左サイト --> <div id="leftside"> <p class="test">leftside</p> </div> <!-- コンテンツ --> <div id="contents"> contents </div> <!-- フッター --> <div id="footer"> <p>fotter</p> </div> </div> </body> </html> ■Css @charset "utf-8"; body{ /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 90%; text-align:center; padding: 0; margin: 0; background-color: #fff; } #warapper{ text-align: left; width: 800px; margin:0 auto; /*ページ全体をセンタリングする指定*/ padding: 0; background-color: #ffffcc; } #head{ background-color: #000; height: 160px; margin: 0 0 20px 0; padding: 0; position: relative; /*ロゴ画像を右下に配置するため*/ } #topbar{ background-color: #dcdcdc; height: 50px; margin: 0 0 20px 0; padding: 0; } #leftside{ background-color: #ccc; width: 180px; float: left; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ overflow:hidden; } #contents{ background-color: pink; width:600px; float: right; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ } #contents_all{ background-color: pink; margin: 0 0 20px 0; /*下方向に余白を設ける*/ padding: 0 0 0 0; } #footer{ background-color:#666; text-align: center; clear: both; margin: 0; padding: 0.5em 0; } .test { background-color: red; }
- 締切済み
- CSS
- 指定したborderの一部が表示されない
以下のようにboxを作りその中にフロートさせた2つ(div class="b"とdiv id="c"を作り、 div class="b"の方にdiv class="nwesbox"を作り、その中にiframeを入れました。 問題はdiv class="nwesbox"に上下左右に表示指定したborderの線の右側のみブラウザ（ie7)で表示されません？ div id="c"を取り除くと表示されます、nwesboxやiframeの幅を変更したりしてみましたが 解決できなく困っています、どなたか教えていただけますでしょうか？ 宜しくお願いします。 以下html記述-----↓ <div class="box"> <div class="b"> <div class="nwesbox"><iframe id="iframe" frameborder="0" scrolling="yes" src="whats.html" title="お知らせ">お知らせ</iframe></div> </div> <div id="c"> <p>*****</p> </div> 以下CSS記述------↓ .box{ width : 898px; margin-left : 0px; margin-top : 0px; padding-left : 0px; margin-bottom : 0px; } .b{ width : 575px; margin-left : 0px; margin-top : 10px; background-color : #ffffff; padding-left : 10px; float : left; margin-right : 0px; } .nwesbox{ width : 575px; height : 233px; background-color : #ffffff; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #0080ff #0080ff #0080ff #0080ff; } #iframe{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 573px; height : 228px; padding-top : 0px; overflow : auto; margin-top : 0px; } ↓---iframe内に読み出してる先のテーブルに指定した内容（テーブル幅）--- #what{ width : 545px; background-color : #ffffff; margin-top : 0px; }
- 締切済み
- HTML
- <p>要素をインライン要素にしての右寄せ
<p>要素をインライン要素にしての右寄せ 【以下、HTML】 .text{ font-size:12px; font-weight:normal; margin:0px; padding:25px 0px 0px 35px; } <div class="text"> <img src="-" style="vertical-align:-2px;margin:0px 10px 10px 15px;"><a href="-">リンク</a><p style="text-align: right;display:inline;">あいうえお</p><br></div> 上記の「あいうえお」の部分を画像やリンクと並列したく、インライン要素で右寄せしたいんですがどうしたらいいでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- floatを適用したdiv内部にあるpタグのmarginについて
floatを適用したdiv内部にあるpタグのmarginについて 現在HTMLとCSSを勉強している者です。 cssのmarginの挙動がいまいち理解できずに困っていたもので、 ご回答いただきたく質問させていただきました。 以下私が作ったサンプルHTMLとCSSです。 ==========HTML========== <div id="test01"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test02"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test03"> <p>Pタグで囲まれた文章です。</p> </div> <div id="clear"> <p>clear: bothです。</p> </div> （<body>前、</body>後省略） ==========CSS========== html, body, div { margin: 0; padding: 0;} p {margin: 10px; padding: 0;} div#test01 {background-color:#EEE; width: 900px;} div#test02 {background-color:#CCC; float: left; width: 650px;} div#test03 {background-color:#AAA; float: left; width: 250px;} div#clear {background-color:#888; clear:both; width: 900px;} 先頭に900pxのdiv（test01）、その下に二つのdiv（test02、03）をfloat:leftで並べました。 最後にclear:bothを行っております。 そして各div内に10pxのmarginを付与したpタグ文字を入力しているのですが、先頭のdivとfloat:leftを行ったdivで、marginの結果が異なってしまいました。 先頭のdivは上下に白い10pxの余白、左はtest01で指定した背景色を残したまま10pxの余白が作られ、float:leftのdivではtest02、03で指定した背景色を残したまま上下左右に10pxの余白が作られています。 このように同じ効果のpタグでも表示が異なってしまう理由は何でしょうか。 また先頭のdivの場合、上下左右に10pxの白または背景色の余白ができるのなら理解できるのですが、何故上下と左右でmargin結果が異なるのか、理由も知りたいです。 おそらくpaddingを併用すれば思った表示にはできると思うのですが、今回はこうなってしまう理由が知りたく質問させていただきました。 また私の記述方法に誤りがあればご指導いただけると助かります。 宜しくお願い申し上げます。
- 締切済み
- HTML
- cssでのdiv要素内div要素の上部marginについて
毎回コーディング中に起きる問題で、 独学でcssを学んだために一番スマートなやり方がわからずその場しのぎで対応していたのですが、 毎回モヤモヤしてしまっていたので綺麗なやり方を知りたく思い質問させて頂きました。 まずはこの画像を見て下さい。 http://pajt.paq.jp/t/a/p/test.html 赤のボックスを緑のボックス内で上部からmarginをとりたいのですが、 緑の要素ごと黄色の要素からmarginとってしまいます。 横はきれいにmarginをとれるのに上のmarginがうまくいきません。 簡易的に書くとこのようなものです。 ↓ http://pajt.paq.jp/t/a/p/test2.html <html> <head> <title>画像</title> <style type="text/css"> <!-- #yellow { width:300px; height: 10px; background: #00FFFF} #green { width:200px; height: 400px; background: #00FF00} #green #red { width: 50px; height: 50px; margin: 50px; background: #FF0000} --> </style> </head> <body> <div id="yellow"></div> <div id="green"> <div id="red"> </div> </div> </body> </html> こういったコーディングをする際に、なるべくスマートな記述の方法を教えて頂きたいです。 宜しくお願いします。
- 締切済み
- HTML
- 定義リストの横並びと<DIV>要素の改行
スタイルシートでテーブルのように横並びでレイアウトさせた定義リストの<dt>の内容にリンクを張っているのですが、 FirefoxとOperaで確認すると、リンク１とリンク２にカーソルを持っていってもカーソルの形が変わらず、クリックしても飛べません。 文字色はリンク用のスタイルシートを反映した色になっています。 スタイルシートの記述に問題があるのだと思うのですが、どこが悪いのかが分かりません。 アドバイス頂けると幸いです。 <dl id="sample"> <dt><a href="aaa.html">リンク１</a> <dd>説明 <dt><a href="bbb.html">リンク２</a> <dd>説明 <dt><a href="ccc.html">リンク３</a> <dd>説明 <dt><a href="ddd.html">リンク４</a> <dd>説明 </dl> dl#sample { margin-left: 1.5em; float: left; width: 450px; padding: 1px 1px 0; color: #000; } dl#sample dt { float: left; clear: both; width: 70px; margin-right: 10px; margin-bottom: 1px; padding: 2px 0 2px 2px; } dl#sample dd { float: left; width: 350px; margin-bottom: 1px; padding: 2px; } --------------------------------------- それともう一つ、 http://jquery.andreaseberhard.de/toggleElements/ このJavascriptを利用してDIV要素を開閉しているのですが、 DIV要素を以下のように二つ並べた場合 <div class="toggler-c" title="タイトル１"> <p>内容</p> </div> <div class="toggler-c" title="タイトル２"> <p>内容</p> </div> 二つとも閉じた状態の時、改行せずに タイトル１タイトル２ と表示されるのですが、これはスタイルシートの記述に問題があるからなのでしょうか。
- ベストアンサー
- HTML
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- docomo携帯サイトのボックスのマージン
携帯サイトで、ボックス(div)に対して マージンを適用させたいと思っています。 実際にそういうサイトがあったので、実現させたいのですが とあるサイトにあった以下のソース <div style="background-color:#ffcccc; margin:0px; padding:0px;">↵ きつきつ</div> <div style="background-color:#ccffcc; margin:1em; padding:1em;↵ border-width:1em; border-style:solid; border-color:#006600;">ゆったり</div> <div style="background-color:#ccccff; margin:0.5em; padding:0.5em;↵ width:2em;">はば指定</div> こちらではDocomoの実機でマージンが取れませんでした。 Docomoの仕様等あるとは思いますが 実際にマージンをとってるサイトがあったのですが あれはどのように実現しているのでしょうか？ なにかいい方法があればご教授下さい。
- 締切済み
- HTML
- p要素を入れたボックスの高さ。
div要素に下のCSSを適用して、そのなかに<p>で囲ったテキストを入れています。 padding: 0 25px; background: transparent url(../image/web/bm_narrow.gif) repeat-y; p要素には、デフォルトで上下にマージンがついていると思うのですが ボックスの高さがp要素のマージン部分を反映せず、背景画像が p要素のマージン部分には表示されないという状況です。 ボックス部分のpaddingをpadding: 1px 25px;とすると きちんと表示されるようになったので、ほぼ解決しているのですが このような現象は正常なのか、バグなのか、知りたいです。よろしくお願いします。
- ベストアンサー
- HTML
お礼
どうも勘違いをしていたようです。 kbd要素の下の線が出て成功したのですが、そのあといろいろHTMLソースを変更してブラウザで画面を確認していませんでした。 大変失礼しました。 表示領域の問題なんですね。線を引く場所の領域を広げてやれば表示できるようになるわけですね。 ありがとうございました。