こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ホームページで上の空白をなくしたいです。

HTMLとCSSについての質問です。

現在、簡単なホームページを作りたいと思っているのですが、
どうしても一番上に空白ができてしまって困っています。

コードは下記のようなものなのですが、どこを直せばよいのか教えてください。
=================================================================
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<!-- 中央揃え-->
<!-- cssの指定-->
<link href="top.css" rel="stylesheet" type="text/css">
<body topmargin="0">
<div id="warrp" align="center">
<div id="head">
<h1>タイトル</h1>
<p>サブタイトル</p>
</div>

<div id="box2">
<div id="menu">
<h2>menu</h2>
<p>左側のコンテンツ</p>
</div>

<div id="soft">
<h2>soft</h2>
<p>右側のコンテンツ</p>
</div>

<div id="main">
<h2>中央</h2>
<p>メインコンテンツ</p>
</div>

<div id="link">
<h2>link</h2>
<p>リンクを張り付け</p>
</div>
</div>
</div>
</body>
</html>
=================================================================
html,body{
height: 100%;
margin:0px;
padding:0px;
}

#box2{
width: 100%;/*全体の幅を指定する*/
height: 100%;
}
#warrp{
margin-top: 0;
width: 100%;/*全体の幅を指定する*/
height: 100%;
}
#head{
margin-top: 0;
height: 20%; /*高さを指定する*/
background-color: #FFFFD5; /*わかりやすいように色を指定します*/
}
#menu {
float: left;/*leftを左に回り込み*/
height: 100%;
width: 25%;/*幅を指定する*/
top: 25%;
background-color:#492498;
}

#soft{
float: right; /*mainを左に回り込み*/
width: 25%;/*幅を指定する*/
height: 100%;
background-color: #af8585;
}
#main{
float: left; /*mainを左に回り込み*/
width: 50%;/*幅を指定する*/
height: 30%;
background-color: #FFEAEA;
}
/*
#foot{
clear: both;floatの回り込みを解除する
height: 70px;高さを指定する
background-color:#E9E9E9;
text-align:center;
}
*/

#link{
float: left;
background-color: #8ce91a;
width: 50%;
height: 70%;
font-size: 20px;
}
=================================================================

投稿日時 - 2018-09-23 12:48:15

QNo.9540228

困ってます

質問者が選んだベストアンサー

H1にデフォルトのマージンがあるからです。
clearCSS系で初期化してからやることを強くお勧めしますが。
今回の質問の分のみ回答しておきます。
H1 {
margin-top:0px;
}
これだけでOKです。

それと、CSSデバッガー(EdgeでもChromeでもついてます)
使えば、この手のはすぐわかりますよ。

投稿日時 - 2018-09-23 13:19:48

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)