CSS、width100％でもできる余白

解決済

質問者：choco0213
質問日時：2012/10/23 03:28
回答数：5件

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか？

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>

CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

通報する

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

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2012/10/23 11:52

スタイルシートの書き始めに、

html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
　これは常に入れておきましょう。

　なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/dev … )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

- 3
- 件

通報する

この回答へのお礼

＞html,body{margin:0;padding:0;}
ということは、bodyはデフォルトだと、paddingが1px以上に設定されているのですか？

*{border:solid 1px red;}　これすごくわかりやすいですね。
ありがとうございます。

通報する

お礼日時：2012/10/23 23:59

No.5

回答者： tracer
回答日時：2012/10/23 22:08

1.

html/cssにおける余白はmarginとpaddingの2種類があります。
marginは外側の余白、paddingは内側の余白です。

2.
html/cssにおける%とはウィンドウに対しての値ではなく、その要素の親の範囲の値です。
したがって、ウィンドウサイズが仮に1000pxあっても、親要素に500pxが設定されていたら、100%を指定しても500px以上にはなりません。また、親要素の幅が100%であっても、親要素自体にmarginやpaddingなどの余白が設定されていると、子要素はその制限を受けます。

上記を前提として、#headerをウィンドウいっぱいの横幅にする場合、#headerの先祖要素であるhtml,bodyの幅が100%であり、かつpaddingとmarginが0である必要があります。その上で、#headerのwidth:100%;margin:0;padding:0が本当の意味で有効になります。

その部分だけを抜き出すと
html,body,#header{
margin:0;
padding:0;
width:100%;
}
#header{
height:100px;
background-color:#00;
}

このようにすれば、幅がウィンドウいっぱいの高さ100px、赤背景の#headerが表示されます。

- 0
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2012/10/23 16:23

No.2です。

ちなみに、HTML/CSSをきちんと整理してみましょう。
内容がわからないので、想像を働かせた部分もあるので適当に修正してください。
★html,bodyのmarginを0にすること
★コンテナブロックのmarginを0にしても、その内部の要素にmarginがある場合もあるので修正すること
　下記サンプルの
　div.header>*,div.section>*,div.footer>*{margin:0 10px;}
　が、それを消す書き方です。
★サンプルはリキッドで、スマートフォン用の480pxから幅広のディスプレイに対応しています。

※　これらの書き方は何度も説明しているはずです。理解しておかないと、ひとつひとつみな聞かなければならなくなります。それじゃ埒が明きません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<ul class="nav" id="langSelect">
＿＿＿<li>EN</li>
＿＿＿<li>CH</li>
＿＿</ul>
＿＿<ul class="nav" id="siteMap">
＿＿＿<li>home</li>
＿＿＿<li>profile</li>
＿＿＿<li>works</li>
＿＿</ul>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>・・・</p>
＿＿<p>・・・</p>
＿＿<p>・・・</p>
＿＿<p>・・・</p>
＿＿<p>・・・</p>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>