2

这个问题是针对这个网站
的 一切都很好，但由于某种原因.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>
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 设置了一个 margin-top 并且它应用了它似乎正在工作

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

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

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

overflow: hidden;

在有边距的元素和接触它的元素上。

于 2012-08-16T13:03:26.460 回答
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;
}

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

于 2012-08-16T13:01:05.640 回答