1

次の問題があります。

背景画像を持つ div 要素があり、その位置はまさに私が望むものです。しかし、子 div を追加すると、変更されます。(上部に少し余白があります)

これがなぜ起こっているのか、そしてそれを修正する方法を知りたいです。

CSS コード:

body,html{
    height:100%;
}

body {
    margin: 0;
    background-color: green;
    background: url(../images/backround_red.png) no-repeat center center fixed;
    background-size: cover;
}

div#mainWrapper {
    position: relative;
    text-align: center;
    margin: auto;
    width: 70em;
    height:100%;
    background: url(../images/header.jpg) no-repeat center center fixed;
    background-size: cover;
    padding-left: 4em;
}

div#loginWrapper {
    position: relative;
    top: 15%;
    margin: 0;
}

スクリーンショット:

childdiv なし: ここに画像の説明を入力

childdivで： ここに画像の説明を入力

JSFiddle: http://jsfiddle.net/DUtb4/

4

3 に答える 3

1

要素のおよびのデフォルト をオーバーライドする必要があります。16pxmargin-topmargin-bottom<p>

これを CSS に追加します

#loginWrapper > p {
    margin: 0;
}

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

于 2013-07-12T12:36:40.687 に答える
1

これを css の上に置くと、役に立ちます。

* {
   margin  : 0;
   padding : 0;
}

これはあなたのコンテンツの変更がここにあります

于 2013-07-12T12:14:41.040 に答える
0

mainWrapper を次のように変更してみてください。

div#mainWrapper {
    position: relative;
    text-align: center;
    margin: 0 auto; /* Added a 0 to the beginning */
    width: 70em;
    height:100%;
    background: url(../images/header.jpg) no-repeat center center fixed;
    background-size: cover;
    padding-left: 4em;
}

padding: 0; も追加します。ボディタグに。

于 2013-07-12T11:45:19.157 に答える