ホームページの上下の隙間を消すには

解決済

質問者：kumatanoon
質問日時：2011/05/21 11:14
回答数：1件

左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。
上下がぴったりつく方法を教えて下さい。

-------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<html>
<style type="text/css">

</style>
</head>

<body>
<div id="main">
<p><img src="images/head_01.gif" width="800" height="1000" /></p>
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： 4017B
回答日時：2011/05/21 12:03

大体、こんな感じでOK。

-- ココから --------------------------------------
body {
margin: 0; padding: 0;
background-color: #999;
}
div#main {
width: 800px;
margin: 0 auto; padding: 0;
background-color: #fff;
}

div#main p {
margin: 0; padding: 0;
line-height: 100%;
}

div#main img {
width: 800px; height: 1000px;
}
-- ココまで --------------------------------------

ポイントは<P>タグに“line-height:100%”を指定して置く事かな。これが無いと、各ブラウザでのDefault値の改行高さが適用されるので、たいていの場合は上下に1行分くらいの隙間が出ます。