- ベストアンサー
隙間ができてしまいます。
高さ7pxのボックスを作ったのに7px以上の大きさで表示され隙間ができてしまいます。 margin: 0px; padding: 0pxを追加しても解決しませんでした。 http://teatsite.ninja-x.jp/ ↑のborderで囲んである部分です。 この隙間の部分を埋めるにはどうすればよいのかご指摘お願いいたします。 以下ソース 【html】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div class="all"> <div class="header"> </div> <div class="menu"> <div class="font-menu"> <div class="menu-top"></div> <div class="menu-center">テスト</div> <div class="menu-bottom"></div> </div> </div> <div class="main"> <div class="font-main"> <div class="main-top"> テスト </div> <div class="main-center"> 本文テスト </div> <div class="main-bottom"></div> </div> </div> <div class="footer"> <div class="font-footer"> テスト </div> </div> </div> </body> </html> 【css】 body{ margin: 0px; padding: 0px; } img{ border: 0; vertical-align: top; } .all{ margin: 0px auto 0px auto; width: 720px; } .font-menu{ color: #ffffff; font-size: 12px; line-height: 150%; } .font-menu a:link{ color: #ffffff; text-decoration: none; } .font-menu a:visited{ color: #ffffff; text-decoration: none; } .font-menu a:hover{ color: #ffffff; text-decoration: underline; } .font-main{ font-size: 12px; line-height: 150%; } .font-footer{ font-size: 12px; } .header{ padding: 44px 0px 0px 0px; height: 56px; } .menu{ margin: 0px 20px 0px 0px; width: 160px; float: left; } .menu-top{/* 問題の部分 */ margin: 0px; padding: 0px; width: 158px; height: 0px; border: solid 1px #000000; background-image: url(pic_menu_top.png); background-repeat: no-repeat; } .menu-center{ width: 124px; height: 22px; padding: 4px 0px 0px 36px; background-image: url(pic_menu_center.png); background-repeat: no-repeat; } .menu-bottom{/* 問題の部分 */ margin: 0px; padding: 0px; width: 158px; padding: 0px; height: 5px; border: solid 1px #000000; background-image: url(pic_menu_bottom.png); background-repeat: no-repeat; } .main{ margin: 0px 0px 0px 20px; width: 520px; float: left; background-image: url(pic_main_wp.png); } .main-top{ margin: 0px; padding: 11px 0px 0px 40px; width: 480px; height: 29px; color: #ffffff; font-size: 16px; background-image: url(pic_main_top.png); background-repeat: no-repeat; } .main-center{ padding: 40px 40px 40px 40px; width: 440px; float: left; } .main-bottom{/* 問題の部分 */ margin: 0px; padding: 0px; width: 518px; height: 5px; border: solid 1px #000000; background-image: url(pic_main_bottom.png); background-repeat: no-repeat; } .footer{ padding: 14px 0px 0px 200px; width: 520px; height: 26px; text-align: center; clear: left; }
- fgc4812
- お礼率22% (2/9)
- レンタルサーバ・ASP
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
問題の部分のスタイルシートに、 font-size:7px; を付け足しましょう。
その他の回答 (2)
- goldfox
- ベストアンサー率49% (123/249)
あ、幅が狭くならなくてもいい（上側の背景画像が下の要素にくっつけばいい）だけなら、 上側の背景画像を、左下配置にでもすればいいです。 background-position: left bottom; しかし、div多いですね。 もう少し減らしたほうが、管理、編集しやすいと思いますが。 例えば、<div class="header"></div>にはタイトルが入るなら <h1 class="header"></h1>にするとか。
補足
やっぱりdivが多いのは見づらいですね… もう少しCSSを勉強して見やすくしたいと思います。
- STICKY2006
- ベストアンサー率29% (1536/5269)
こんにゃくは(´・ω・`)（ぶにょぶにょ。 >><div class="main-bottom"></div> を <span class ="main-bottom"></span> あたりじゃできませんかね？ <div>タグと<span>タグの違いを探してみると納得できるかもしれませんよ。
補足
<span class ="main-bottom"></span> に変えてみましたが、spanで囲んだ部分が消滅してしまいました。 http://teatsite.ninja-x.jp/span.html spanに変えるのとは違うみたいです。
お礼
フォントサイズを書いたところ無事に空白が無くなりました！ ありがとうございます。