利用規約の変更について

高さ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;
}

このQ&Aに関連する最新のQ&A

A 回答 (3件)

問題の部分のスタイルシートに、


font-size:7px;
を付け足しましょう。
    • good
    • 0
この回答へのお礼

フォントサイズを書いたところ無事に空白が無くなりました!
ありがとうございます。

お礼日時:2008/02/05 20:39

あ、幅が狭くならなくてもいい(上側の背景画像が下の要素にくっつけばいい)だけなら、


上側の背景画像を、左下配置にでもすればいいです。
background-position: left bottom;

しかし、div多いですね。
もう少し減らしたほうが、管理、編集しやすいと思いますが。
例えば、<div class="header"></div>にはタイトルが入るなら
<h1 class="header"></h1>にするとか。

この回答への補足

やっぱりdivが多いのは見づらいですね…
もう少しCSSを勉強して見やすくしたいと思います。

補足日時:2008/02/05 20:39
    • good
    • 0

こんにゃくは(´・ω・`)(ぶにょぶにょ。



>><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に変えるのとは違うみたいです。

補足日時:2008/02/05 17:08
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング