10

これはおそらく何百万回も聞かれているでしょうが、誰かが 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 の幅よりも小さい場合、左側にも隙間ができます。

4

4 に答える 4

7

スターセレクターを使用してすべてをリセットして、すべてを自分で設定できるようにすることができます。

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


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

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

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

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
于 2013-11-06T15:07:42.993 に答える
1

物件が原因の場合もありline-heightます。だからline-heightあなたが望むようにに設定してください！

于 2015-07-10T17:19:50.437 に答える
1

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

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

デモフィドル

于 2013-11-06T15:07:30.597 に答える