みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

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

解決済みの質問

CSS、width100%でもできる余白

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

投稿日時 - 2012-10-23 03:28:15

QNo.7761898

困ってます

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

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

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

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

投稿日時 - 2012-10-23 11:52:27

お礼

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

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

投稿日時 - 2012-10-23 23:59:32

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

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

回答(5)

ANo.5

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が表示されます。

投稿日時 - 2012-10-23 22:08:39

ANo.4

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">
<!--
html,body{margin:0;padding:0;color:white;width:100%;}
a:link{color:aua;}
a:visited{color:blue;}
a:hover,a:focus{color:yellow;}
div.header,div.section,div.footer{
_width:70%;min-width:480px;max-width:800px;margin:0 auto;
}
div.header>*,div.section>*,div.footer>*{margin:0 10px;}
div.header,div.footer{background-color:black;position:relative;}
div.section{
_border-style:double;
_border-width:6px 0 6px 0;
_border-top-color:yellow;border-bottom-color:blue;
_background:gray url(./images/background/stone.jpg);
}
div.header{min-height:90px;text-align:center;}
div.header h1:before{
_content:url(./images/logo.gif);
_width:150px;height:80px;
_background-color:white;
_position:absolute;top:5px;left:5px;
}
div.header ul.nav,div.header ul.nav li{
_display:block;list-style-type:none;
_margin:0;padding:0;
_text-align:center;
}
div.header ul.nav{text-align:right;}
div.header ul.nav li{display:inline-block;width:4em;}
-->
_</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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

投稿日時 - 2012-10-23 16:23:46

ANo.2

CSSの body に margin:0px; を足したらどうでしょう。

投稿日時 - 2012-10-23 10:36:10

margin-left:0px;margin-right:0px;
を追加してみては?

投稿日時 - 2012-10-23 09:36:19

あなたにオススメの質問