Question

这个问题适用于this website
一切都很好，但出于某种原因我的.content div，给出了一个css规则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>

Answer 1

使用行margin: 0 auto;，您将覆盖margin-top属性。试试这个：

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

Answer 2

.content {

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

或者你可以简单地

margin: 50px auto 0;

Answer 3

我可以看到内容div中的幻灯片div。我为幻灯片div提供了一个margin-top，它应用了似乎正在工作

<div id="slides"></div>

Answer 4

在Chrome中，我在.content上获得了以下CSS行：

.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;
}

第三行中的行确保忽略第一行。

Answer 5

不确定，你想做什么，但页面似乎是对的。你清除了浏览器缓存了吗？

如果您根本不想要重叠边距，请尝试

overflow: hidden;

在带边距的元素和触及它的元素上。

保证金顶部不适用（不工作）

5 个答案: