web-dev-qa-db-ja.com

divとページの上部の間のスペースを削除するにはどうすればよいですか？

これはおそらく100万回も1回も尋ねられていますが、誰かがdivの動作を私に説明してくれれば幸いです。

ページの上部とページの上部の間にギャップがある、ページの中央に揃えるコンテナーdivがあります。ページの上部にフラッシュさせたい。削除する必要のあるマージンまたはパディングがあると想定していますが、それが何であるかを考えることができません。 divに何もない場合でも、まだギャップがあります。

    <body>
    <div id='mainContent'>

    </div>
</body>


body
{
    background-color:black;
    background-image:url("img/background.jpg");
    background-repeat:repeat;
}

#mainContent
{
    width:1200px;
    height:500px;
    background-color:#FFFFFF;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
}

これがJSFiddleです は、私が何を意味するのかを説明します。

誰かがdivがそのままプッシュダウンされる理由を誰かに説明してもらえますか？ divに配置されたコンテンツに影響を与えない堅牢なソリューションはありますか？

注：画面の幅がdivの幅よりも小さい場合、左側にも隙間ができます。

csshtmlmargin
10
user2630210

bodyのデフォルトのマージンである約8pxをリセットする必要があります。

body,html {
  margin:0;
  padding:0;
}

デモhttp://jsfiddle.net/H76bq/3/

デフォルトでは、すべての要素にいくつかのプロパティがあります。

http://www.w3.org/TR/CSS21/sample.html

あなたはあなた自身のCSSでこれをリセットすることができます。

13
DaniP

スターセレクターを使用してすべてをリセットし、自分ですべてを設定できます。

* { margin: 0; padding: 0; border: none; }


または、マスターリセットスタイルシートを使用する場合は、Jonathan Nealの Normalize CSS をGoogle CDN経由で使用できます。

Normalize.cssは、ブラウザーがすべての要素をより一貫して最新の標準に沿ってレンダリングできるようにするカスタマイズ可能なCSSファイルです。正規化が必要なスタイルのみを正確に対象とするために、デフォルトのブラウザースタイルの違いを調査しました。

これを頭に入れてください：

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
3
Code Maverick

line-heightプロパティ。したがって、line-height好きなように！

1
Ari

追加 margin: 0px;〜body以下のように。その理由は、デフォルトでbodyがマージンを導入するためです。

body{
    background-color:black;
    background-image:url("img/background.jpg");
    background-repeat:repeat;
    margin: 0;
}

デモフィドル

1
Harry