プロが教える店舗&オフィスのセキュリティ対策術

html+cssを本で勉強している超初心者です。HTML/XHTML&cssという本で指示どうりソースを入力しているのですが、プラウザの画面の上部から約20px程余白が出ます。本の指示でプラウザの画面と
接する形で { margin: 0; } を入力しても移動せず{ margin: -20px margin-left: 0px; }と入力するとプラウザ画面と接します。何が原因か何方か教えて頂けませんか? よろしくお願いいたします。(IE8です)

A 回答 (1件)

早期解決したいなら、ソースを提示すれば答えて貰えやすいでしょうに・・・



ソースが無いから、予想しかできないが、

<body>
<div>
<h1> または、<p>
などのようなパターンなら、
最上部の <h1> または、<p> などの
マージンが効いている場合が多いでしょう。

 <h1 class="top"> または、<p class="top"> のようなセレクタで

一旦CSSでも、
{ margin: -20px margin-left: 0px; }
これは、最上部の事かな? そんなネガティブなCSSは削除して、

body{ margin: 0; padding:0;} として、
.top{ margin-top:0; padding-top:20px;}


footerの最下部も空いてませんか? bottomで修正。

この回答への補足

ご回答有難うございました。下記のソースの部分なんですが、なんで本のとうりソースを入力しているのに上部がプラウザの画面と接しないのがわからないのです。なんか本によると古いOperaではpaddingとプロパティを指定しないと余白は消せないと書いてありますが。(アンインソール済みですが)
皆さんこのようになるのですか?出来たら本のとうりの画面になってくれたらと願っています。なんとか教えて頂けませんか?よろしくお願い致します。

body {background-color: #aaccff;
background-image: url(back-border.png);
background-repeat: repeat-y;
background-position: top center;
margin: 0;
padding: 0;}
このmargin: 0;を-20px;にしたらプラウザの画面と接しましたが、左側が少しカットされています。
この状態で本を進めていくと、やはり途中でおかしな画面になってしまいますので、なんとかならないかとご質問した次第です。あと、本の最初からの入力でも上部が本の写真と違って余白大きくなっています。私のパソコンがおかしいのでしょうか? よろしくお願い致します。

補足日時:2011/04/06 08:43
    • good
    • 0

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