2

この質問はこのウェブサイト
のためのものですすべてが良いですが、何らかの理由で.content、cssルールが与えられている私のdiv
margin-top: 50px;はそのマージンが機能していないようです。問題のあるdivに明るい黄色の背景色を付けて、確認できるようにしました。

これが問題を引き起こす可能性のある要素のcssコードです。（他の要素でもあるかどうかはわかりません。）

header {
    background-color: #1d130e;
    background-image: url("../img/header_bg.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    min-width: 1000px;
    height: 100px;
    margin-top: 50px;
    border-top: 1px solid #0d0907;
    border-bottom: 1px soid #0d0907;
    box-shadow: 0px 0px 15px -1px #181513;
}

.content {
    margin-top: 50px;
    width: 1000px;
    margin: 0 auto;
    background: #eef496;
}

そしてページのHTML：

<body>
        <!-- Header -->
        <header>
            ...
        </header>
        <!-- Header [END] -->

        <!-- Content -->
        <div class="content">
            <!-- Slideshow -->
            ...
            <!-- Slideshow [END] -->
        </div>
        <!-- Content [END] -->

        <!-- Footer -->
        <footer></footer>
        <!-- Footer [END] -->
    </body>
4

5 に答える 5

5

この行を使用margin: 0 auto;すると、margin-topプロパティをオーバーライドできます。これを試してみてください：

.content {
    margin: 0 auto;
    margin-top: 50px;
    width: 1000px;
    background: #eef496;
}
于 2012-08-16T12:58:37.700 に答える
1 
.content {

    width: 1000px;
    margin: 50px auto 0 auto;
    background: #eef496;
}

またはあなたは単にすることができます

margin: 50px auto 0;
于 2012-08-16T13:00:42.827 に答える
1

コンテンツdiv内にあるスライドdivを見ることができます。スライドdivにマージントップを付けましたが、機能しているように見えます。

<div id="slides"></div>
于 2012-08-16T13:02:33.407 に答える
0

Chromeでは、次のCSS行が表示され.contentます。

.content {
   margin-top: 50px; /* margin-top is defined */
   width: 1000px;
   margin: 0 auto; /* all the margins are overridden, including margin-top */
   background: #EEF496;
   display: block;
}

3行目の行は、最初の行が無視されることを確認します。

于 2012-08-16T13:01:05.640 に答える
0

わかりませんが、何をしたいのかわかりませんが、ページはほぼ正しいようです。ブラウザのキャッシュをクリアしましたか？

余白を重ねたくない場合は、

overflow: hidden;

マージンのある要素とそれに接触している要素に。

于 2012-08-16T13:03:26.460 に答える